vuetify v-list with reactive source collapses upon adding or removing items - vue.js

Question

not sure if the reactivity part is relevant, but I use vuetify with Meteor.js and my problem is that whenever the number of items in the sub-group changes, it collapses the entire list. That is extremely annoying as the list has two levels and I need to reopen both levels to get back to the group I am editing.
I use exactly the same structure as the official sub-group example:
https://vuetifyjs.com/en/components/lists/#sub-group
Say the number of items in the Admin section in that example above changes (which means reassigning a different array to a local variable in data(){}). Then the whole list will collapse.
Is there anything I can do to keep having opened the current item?
Thanks for any tips!

Answer 1

I tested [https://vuetifyjs.com/en/components/lists/#sub-group][1] in Vue 2 and for me, the menu didn't close when a new item was added.
I pushed a new item into data.admin
I assigned a totally new array to data.admin
In both cases, the menu remained open.
I think the question is, are you updating a component state or props.
Because updating component props would probably cause it to rerender and therefore close the menu.
Here is the code that worked for me:
<template>
<v-app>
<v-main>
<v-card class="mx-auto" width="300">
<v-list>
<v-list-group :value="true" prepend-icon="mdi-account-circle">
<template v-slot:activator>
<v-list-item-title>Users</v-list-item-title>
</template>
<v-list-group :value="true" no-action sub-group>
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title>Admin</v-list-item-title>
</v-list-item-content>
</template>
<v-list-item v-for="([title, icon], i) in admins" :key="i" link>
<v-list-item-title v-text="title"></v-list-item-title>
<v-list-item-icon>
<v-icon v-text="icon"></v-icon>
</v-list-item-icon>
</v-list-item>
</v-list-group>
<v-list-group no-action sub-group>
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title>Actions</v-list-item-title>
</v-list-item-content>
</template>
<v-list-item v-for="([title, icon], i) in cruds" :key="i" link>
<v-list-item-title v-text="title"></v-list-item-title>
<v-list-item-icon>
<v-icon v-text="icon"></v-icon>
</v-list-item-icon>
</v-list-item>
</v-list-group>
</v-list-group>
</v-list>
</v-card>
<v-btn #click="addElement">Add element</v-btn>
</v-main>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
admins: [
['Management', 'mdi-account-multiple-outline'],
['Settings', 'mdi-cog-outline'],
],
cruds: [
['Create', 'mdi-plus-outline'],
['Read', 'mdi-file-outline'],
['Update', 'mdi-update'],
['Delete', 'mdi-delete'],
],
}),
methods: {
addElement() {
this.admins.push(['New', 'mdi-account-multiple-outline']);
// Completely change the menu
/* this.admins = [
['New', 'mdi-account-multiple-outline'],
['Management', 'mdi-account-multiple-outline'],
['Settings', 'mdi-cog-outline'],
]; */
},
},
};
</script>