Html 子选项卡未更改Vue JS

我有一个带有选项卡的简单vue应用程序：

<div id="tabnav">
    <div class="tab" v-if="tabnav_active === 1">content 1
       <div id="tabcategory">
            <ul>
                <li v-on:click="tabnav_active=1" v-bind:class="[ tabcategory_active === 1 ? 'text-white' : 'text-white opacity-50' ]">
                    <span>ONE</span>
                </li>
                <li v-on:click="tabnav_active=2" v-bind:class="[ tabcategory_active === 2 ? 'text-white' : 'text-white opacity-50' ]">
                    <span>TWO</span>
                </li>
                <li v-on:click="tabnav_active=3" v-bind:class="[ tabcategory_active === 3 ? 'text-white' : 'text-white opacity-50' ]">
                    <span>THREE</span>
                </li>
            </ul>

       <div class="tab" v-if="tabcategory_active === 1">SubCategory One</div>
       <div class="tab" v-if="tabcategory_active === 2">SubCategory One</div>
       <div class="tab" v-if="tabcategory_active === 3">SubCategory One</div>

       </div>
    </div>
    <div class="tab" v-if="tabnav_active === 2">content 2</div>
    <div class="tab" v-if="tabnav_active === 3">content 3</div>

    <ul>
        <li v-on:click="tabnav_active=1" v-bind:class="[ tabcategory_active === 1 ? 'text-white' : 'text-white opacity-50' ]">
            <span>ONE</span>
        </li>
        <li v-on:click="tabnav_active=2" v-bind:class="[ tabcategory_active === 2 ? 'text-white' : 'text-white opacity-50' ]">
            <span>TWO</span>
        </li>
        <li v-on:click="tabnav_active=3" v-bind:class="[ tabcategory_active === 3 ? 'text-white' : 'text-white opacity-50' ]">
        <span>THREE</span>
        </li>
    </ul>
</div>

<script type="text/javascript">
    new Vue({
        el: '#tabcategory',
        data: { tabcategory_active: 1 }
    });

    new Vue({
        el: '#tabnav',
        data: { tabnav_active: 1 }
    });
</script>

内容1





子类别一
子类别一
子类别一
内容2
内容3





新Vue({
el:“#tabcategory”，
数据：{tabcategory_active:1}
});
新Vue({
el:“#tabnav”，
数据：{tabnav_活动：1}
});

tabnav工作得很好，但是当我单击第二个选项卡（tabcategory）时，没有任何变化。我知道我错过了一些简单的东西，但我没有得到任何错误

---

有人可以帮我吗？

使用两个不同的Vue实例有什么特别的原因吗？没有特别的原因，我只是尝试使用vuejs作为选项卡