Parent Vuetify VMenu Not Closing When Child Selected - vue.js

Question

My app creates it's main navigation dynamically via for loops to generated nested vmenu's and vlists. It generates correctly. The problem is when a user clicks a link in a nested menu, the parent menu remains open. I've tried close-on-click and close-on-content-click on both the main and nested menu, but that's not working.
My codepen has a simplified example. If you select MENU 1, then hover over Subitem 1-1 and click on Subitem 1-1-1, that immediate menu closes, but the main menu remains open.
My codepen.
<div id="app">
<v-app id="inspire">
<v-container>
<!-- top level menu -->
<v-menu
v-for="(menu,index) in menus"
:key="`menu-${index}`"
offset-y
close-on-click
#click="route()"
>
<v-btn
flat
primary
slot="activator"
>{{ menu.title }}</v-btn>
<!-- each item on a menu .. is a menuitem -->
<v-list dense>
<v-list-tile
v-for="(menuitem,index) in menu.items"
:key="`menuitem-${index}`"
#click="route()"
>
<!-- or a popout of submenu items -->
<v-list-tile-content>
<v-menu
offset-x
open-on-hover
close-on-click
>
<v-list-tile
slot="activator"
#click="route()"
>
<v-list-tile-title>{{ menuitem.title }}</v-list-tile-title>
<v-list-tile-action
class="justify-end"
v-if="menuitem.items"
>
<v-icon primary>arrow_right</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list
dense
v-if="menuitem.items"
>
<v-list-tile
v-for="(menusubitem,index) in menuitem.items"
:key="`menusubitem-${index}`"
#click="route()"
>
<v-list-tile-title>{{ menusubitem.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-menu>
</v-container>
</v-app>
</div>
And the related script.
new Vue({
el: '#app',
data: () => ({
menus: [
{
title: 'MENU 1',
items: [
{ title: 'Subitem 1-1',
items: [
{ title: 'Subitem 1-1-1' },
{ title: 'Subitem 1-1-2' }
]
},
{ title: 'Subitem 1-2' },
{ title: 'Subitem 1-3' }
]
},
{
title: 'MENU 2',
},
{
title: 'MENU 3',
items: [
{ title: 'Subitem 3-1' },
{ title: 'Subitem 3-2' },
]
}]
}),
methods: {
route() {
console.log("replace with router")
}
}
})

Answer 1

One option would be to access and close parent menu explicitly via isActive property:
route(parentMenuIndex) {
if (arguments.length) {
const parentMenu = this.$refs.menuRef[parentMenuIndex];
parentMenu.isActive = false;
}
}
where this.$refs.menuRef is used to access parent menu component via the ref attribute:
<v-menu
v-for="(menu,index) in menus"
:key="`menu-${index}`"
offset-y
close-on-click
close-on-content-click
ref="menuRef"
>
...
</v-menu>
Here is an updated CodePen