Vuetify list subgroup auto collapse when clicked

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>