如何实现Vuetify嵌套v-list的所有父级项可同时展开？

我有一个嵌套结构的v-list，需求是让所有一级列表项能够同时展开。尝试给一级v-list-group组件添加:value="true"属性，页面加载时两个一级项确实都成功展开，但手动关闭其中一个项后，列表就恢复到无法同时展开多个一级项的状态。查阅Vuetify API文档未找到解决办法。

解决办法 #

• 问题本质：默认情况下，同层级的v-list-group会共享内部的互斥状态管理逻辑，仅设置固定的:value="true"只能完成初始化，无法覆盖后续交互时的状态互斥规则。
• 实现多展开的核心是给每个一级v-list-group绑定独立的响应式状态：
  1. 在组件的data中定义存储每个一级组状态的变量：

     data() {
       return {
         // 数组索引对应每个一级组，初始值设为true实现默认全展开
         groupExpandedStates: [true, true]
       }
     }
     

  2. 给每个一级v-list-group绑定对应的状态变量，并通过input事件更新状态：

     <v-list-group 
       :value="groupExpandedStates[0]" 
       @input="newState => groupExpandedStates[0] = newState"
     >
       <!-- 第一个一级组的内容 -->
     </v-list-group>
     
     <v-list-group 
       :value="groupExpandedStates[1]" 
       @input="newState => groupExpandedStates[1] = newState"
     >
       <!-- 第二个一级组的内容 -->
     </v-list-group>
     

• 逻辑说明：通过独立的响应式变量控制每个组的展开/折叠状态，完全脱离默认的互斥逻辑，让每个一级组的状态变更互不影响，从而实现支持同时展开多个一级列表项的需求。

内容的提问来源于stack exchange，提问作者linus