如何在vuepress组件中自动生成侧边栏

Question

这是我的readme.md文件

---
#blog_index: true
sidebar: auto
---

<IndexByCategory />

这是我的IndexByCategory组件

<template>
    <div>
        <div v-for="(posts,postTag,index) in postsResult">
            <h2 :id="postTag"><a href="#" aria-hidden="true" class="header-anchor">#</a> {{postTag}}</h2>
            <div v-for="post in posts">
            <h3>
                <router-link :to="post.path">{{ post.frontmatter.title }}</router-link>
            </h3>

            <p>{{ post.frontmatter.description }}</p>

            <p>
                <router-link :to="post.path">Read more</router-link>
            </p>
            <hr>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        computed: {
            postsResult() {
                var tagSort = new Object();
                var filteredPages=this.$site.pages.filter(x => x.path.startsWith('/blog/'));
                //console.log(this.$site["pages"]);
                filteredPages.forEach(element => {
                    if(element["frontmatter"]["tags"]==undefined){
                        console.log(element["title"]+"  don't have tags in frontmatter!");
                    }
                    element["frontmatter"]["tags"].forEach(element2 => {
                        if (tagSort[element2] == undefined) {
                            tagSort[element2] = new Array();
                        }
                        tagSort[element2].push(element);
                    });
                });
                //console.log(tagSort);
                return tagSort;
            }
        }
    }
</script>

在markdown文件（* .md）中，vuepress可以根据head标签自动生成侧边栏（＃## ###）。我想像在markdown文件中那样在vuepress组件中生成侧边栏，但是我不知道实现它的最快方法。