Categories
javascript vue.js vuetify.js

How to set deactive other group list if one is active on same time in 2nd level of menu lists?

I am working on the Vue.js template and I need to create a menu up to the 3rd level. If I perform active deactivate functionality using v-model then that is working fine but on the 1nd level, not on 2nd level.

Dom:

<template v-for="item of category">
<template v-if="item.items!= null">
<v-list-group :key="item.title" no-action v-model="item.active">
<template v-slot:activator>
<i class="mr-2" :class="item.action"></i>
<span>{{ item.title }}</span>
</template>
<div>
<template v-for="child in item.items">
<template v-if="child.subitems !== null">
<v-list-group sub-group no-action :key="child.id" prepend-icon="m"
v-model="child.subactive">
<template v-slot:activator>
<v-list-item-title v-text="child.title">
<i class="mr-2" :class="child.action"></i>
</v-list-item-title>
</template>
<template v-for="(subchild) in child.subitems">
<v-list-item :key="subchild.id"
:to="subchild.path">
<v-list-item-title v-text="subchild.title"></v-list-item-title>
</v-list-item>
</template>
</v-list-group>
</template>
</tempalte>
</div>
</v-list-group>
</template>
</template>

Data:

export const category = [
{
action: 'icon-name',
title: 'Level 1',
active: false,
items: [
{
title: 'Level 2',
subactive: true,
path:null,
subitems:[
{ title: 'Level 3', path: '/default/level3'},
{ title: 'Level 3.1', path: '/dashboard/level3.1'}
]
},
{
title: 'Level 2.1',
subactive: false,
path:null,
subitems:[
{ title: 'Level 3', path: '/dashboard/level3'},
{ title: 'Level 3.1', path: '/dashboard/level3.1'},
]
},
]
}
]
}

According to the documentation of vuetify for the 1st level I use v-model="item.active" and I tried same thing with 2nd level v-model="child.subactive" but it is not working for the 2nd level how can I do this??