Close Menu when clicking on list

Hello, could you help me with the following problem, I have a menu that provides JSON to show buttons in the navigation, when clicking on a vbutton it reads a list to show in v-list, but if that list has another list it shows a sublist, this is my complete code:

<v-menu v-for="(menu, index) in menus" :key="index" rounded="lg" offset-y active-class="secondary darken-4 text text--accent-4" >
    <template v-slot:activator="{on, attrs}" >
        <v-btn v-bind="attrs" v-on="on" rounded :color="menu.color" class="mx-3" >
            <v-icon left>{{menu.icon}}</v-icon>{{menu.label}}
        </v-btn>
    </template>

    <v-list v-for="(li, indx) in menu.list" :key="indx" active-class="secondary darken-4 text text--accent-4" >
        <v-list-item v-if="!li.list" @click="$router.push({name: li.link})" >
            <v-icon>{{li.icon}}</v-icon>
            <v-divider class="mx-2"></v-divider>
            <v-list-item-title>{{li.label}}</v-list-item-title>
        </v-list-item>


        <v-menu ref="parentMenuRef" dense offset-x v-else>
            <template v-slot:activator="scope">
                <v-list-item dense v-on="scope.on">
                    <v-icon>{{li.icon}}</v-icon>
                    <v-divider class="mx-2"></v-divider>
                    <v-list-item-title>{{li.label}}</v-list-item-title>
                    <v-icon rigth>mdi-menu-right</v-icon>
                </v-list-item>
            </template>
            <v-list dense>
                <v-list-item-group dense>
                    <v-list-item dense v-for="(menu, index) in li.list" :key="index">
                        <v-list-item-title dense @click="$refs.parentMenuRef.isActive = true">
                            <v-icon left>{{menu.icon}}</v-icon>
                            <span>{{ menu.label }}</span>
                        </v-list-item-title>
                    </v-list-item>
                </v-list-item-group>
            </v-list>
        </v-menu>
    </v-list>
</v-menu>

The problem is to click on the sublist, since the first list does not hide me, I am redirected to the URL but the first list remains active, how can I hide it?

Specifically, this part of the code is the one that does not hide me, when clicking on the list below it does not hide the one above me.

<v-menu ref="parentMenuRef" dense offset-x v-else>
    <template v-slot:activator="scope">
        <v-list-item dense v-on="scope.on">
            <v-icon>{{li.icon}}</v-icon>
            <v-divider class="mx-2"></v-divider>
            <v-list-item-title>{{li.label}}</v-list-item-title>
            <v-icon rigth>mdi-menu-right</v-icon>
        </v-list-item>
    </template>
    <v-list dense>
        <v-list-item-group dense>
            <v-list-item dense v-for="(menu, index) in li.list" :key="index">
                <v-list-item-title dense @click="$refs.parentMenuRef.isActive = true">
                    <v-icon left>{{menu.icon}}</v-icon>
                    <span>{{ menu.label }}</span>
                </v-list-item-title>
            </v-list-item>
        </v-list-item-group>
    </v-list>
</v-menu>

In this image I show how it looks before clicking on the sublist.

In this other image I show how it looks after clicking on the sublist

thank you!