如何在vue组件的treeview中激活子类别?

我有两个vue组件。

我的第一个组件(父组件)如下所示:

<template>
    ...
        <ul class="filter-category" v-for="list in categories">
            <list-category :data="list" :category-id="categoryId"></list-category>
        </ul>
    ...
</template>
<script>
    ...
    export default {
        ...
        data() {
            return {
                categories: [
                    {
                        id: 1,
                        name: 'England',
                        children: [
                            {
                                id: 3,
                                name: 'Chelsea',
                                children: [
                                    {id: 7, name: 'Hazard'},
                                    {id: 8, name: 'Morata'}
                                ]
                            },
                            {
                                id: 4,
                                name: 'Manchester United',
                                children: [
                                    {id: 9, name: 'Pogba'},
                                    {id: 10, name: 'Lukaku'}
                                ]
                            }
                        ]
                    },
                    {
                        id: 2,
                        name: 'Spain',
                        children: [
                            {
                                id: 5,
                                name: 'Real Madrid',
                                children: [
                                    {id: 11, name: 'Ronaldo'},
                                    {id: 12, name: 'Bale'}
                                ]
                            },
                            {
                                id: 6,
                                name: 'Barcelona',
                                children: [
                                    {id: 13, name: 'Messi'},
                                    {id: 14, name: 'Suarez'}
                                ]
                            },
                        ]
                    }
                ],
                categoryId: 7
            }
        }
    }
</script>

我的第二个组件(子组件)如下所示:

<template>
    <li>
        <!--parent-->
        <a v-if="isFolder" href="javascript:" @click="toggle">
            <span class="fa fa-fw" :class="icon"></span> {{data.name}}
        </a>
        <!--if not folding, we do not need an binding event-->
        <a v-else href="javascript:" :title="data.name"><span class="fa fa-fw fa-circle-o"></span> {{data.name}}</a>
        <!--children-->
        <ul v-if="isFolder" :class="isShow">
            <list-category v-for="(data, index) in data.children" :key="index" :data="data" :search="search"></list-category>
        </ul>
    </li>
</template>
<script>
    export default {
        props: ['data', 'categoryId'],
        data() {
            return {
                open: false
            }
        },
        computed: {
            icon() {
                return {
                    'fa-plus': !this.open,
                    'fa-minus': this.open,
                }
            },
            isFolder() {
                return this.data.children && this.data.children.length
            },
            isShow() {
                return this.open ? 'show': 'hide'
            }
        },
        methods: {
            toggle() {
                this.open = !this.open
            }
        }
    }
</script>

If道具 categoryId = id 数据中的类别 categories ,则我希望该类别处于活动状态。

在我的代码中,我想知道如果执行了代码,类别危险活动如下:

==========================================================================

==========================================================================

我该怎么做?