Vuetify list subgroup auto collapse when clicked - vue.js

Question

I have the following 2-level vuetify list . However, when I tried clicking on a child of the subgroup, the subgroup just collapsed like in the second half of this video.
I notice that when clicking on the child item, the sub list (Stock Statistics)'s isActive property is set to false.
How do I fix so that the subgroup remain open when I click on its child? Thanks in advance!
<template>
<v-list nav expand>
<template v-for="({ label, icon, group, subItems }, index) in items">
<v-list-group
v-if="subItems && subItems.length"
:key="index"
:group="group"
class="v-list--dense"
color="default"
append-icon="mdi-menu-down"
active-class="v-list-group--active"
>
<template #activator>
<v-list-item-icon class="mr-1">
<v-icon color="grey" v-text="icon"></v-icon>
</v-list-item-icon>
<v-list-item-content class="overflow-visible">
<v-list-item-title
class="subtitle-2"
v-text="$t(label)"
></v-list-item-title>
</v-list-item-content>
</template>
<template v-for="(child, idx) in subItems">
<v-tooltip v-if="!child.subChildItems" :key="idx" right>
<template #activator="{ on, attrs }">
<v-list-item
nuxt
:to="{ name: child.routeName }"
v-bind="attrs"
v-on="on"
>
<v-list-item-icon class="ml-4 mr-0">
<v-icon >mdi-circle-small</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title
v-text="$t(child.label)"
></v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
<span>{{ $t(child.label) }}</span>
</v-tooltip>
<v-list-group
v-else
:key="idx"
:group="child.subGroup"
sub-group
class="v-list--dense"
color="default"
prepend-icon="mdi-circle-small"
active-class="v-list-group--active"
>
<template #activator>
<v-list-item-content class="overflow-visible" style="margin-left: -16px;">
<v-list-item-title
class="subtitle-3"
v-text="$t(child.label)"
></v-list-item-title>
</v-list-item-content>
<v-list-item-icon class="ml-0 mr-0">
<v-icon>mdi-menu-down</v-icon>
</v-list-item-icon>
</template>
<template
v-for="(
{ label, routeName }, idxChild
) in child.subChildItems"
>
<v-tooltip :key="idxChild" right>
<template #activator="{ on, attrs }">
<v-list-item
nuxt
subheader
:to="{ name: routeName }"
v-bind="attrs"
v-on="on"
>
<v-list-item-icon class="ml-4 mr-0">
-
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title
v-text="$t(label)"
></v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
<span>{{ $t(label) }}</span>
</v-tooltip>
</template>
</v-list-group>
</template>
</v-list-group>
</template>
</v-list>
</template>