At work, I have a page with a context menu that contains subgroups.

<v-menu v-model="quickActionVisible">
  <v-list v-model:opened="quickActionsOpen">
    <v-list-group :value="'one'">...</v-list-group>
    <v-list-group :value="'two'">...</v-list-group>
    <v-list-group :value="'three'">...</v-list-group>
  </v-list>
</v-menu>

In my component:

data() {
  return {
    ...
    quickActionsOpen: [],
  };
}

For debugging, I have {{quickActionsOpen}} somewhere so I can watch the value of the array as I interact with the app.

When I click to open the menu, it appears and all the subgroups are closed. As I click on them, I see their :value being added and removed from the quickActionsOpen array as I’d expect. Let’s say I left it at ['three'] and I click away. The menu closes and the quickActionsOpen printout still reads ['three']. However when I reopen the menu, the array printout reverts to [] and the v-list-groups are all collapsed. This seems counter to the documentation.

When the menu opens, we do a lot of calculating on what you just clicked on to decide what to include in the menu, however none of that logic touches quickActionsOpen or changes the value or presence/absence of any of the v-list-groups. I don’t believe any of that logic should impact which groups are open.

My overall goal is to simply keep user-opened subgroups open between instances of opening the v-menu.

What can I do to troubleshoot/fix this?

EDIT: I’ve found a hacky work-around:

this.quickActionVisible = true;

// displaying the menu is resetting the "open" array, so we need to un-reset it
const openCache = this.quickActionsOpen;
await this.$nextTick();
this.quickActionsOpen = openCache;

After doing all the calculating we need to know what’s in the menu, if I store the open list, wait a tick, and set the open list then I get the behavior I’m looking for. I’m leaving this question open because I’m hoping for a better solutions where the list never resets the open array to begin with.