fix(nested): use reactive proxy of opened

packages/vuetify/src/components/VList/__tests__/VListGroup.spec.cy.tsx

@@ -5,8 +5,13 @@ import { VListGroup } from '../VListGroup'
 import { VListItem } from '../VListItem'
 import { VList } from '../VList'
 
+// Components
+import { VBtn } from '@/components/VBtn'
+
 // Utilities
 import { ref } from 'vue'
+// Types
+import type { Ref } from 'vue'
 
 describe('VListGroup', () => {
   function mountFunction (content: JSX.Element) {
@@ -91,4 +96,34 @@ describe('VListGroup', () => {
       .get('.v-list-group').should('exist')
       .get('.v-list-group__items').should('be.visible')
   })
+
+  // https://github.com/vuetifyjs/vuetify/issues/20354
+  it('should support programmatically expand group via open model', () => {
+    const opened: Ref<string[]> = ref([])
+
+    cy.mount(() => (
+      <>
+        <VBtn onClick={ () => { opened.value.push('Users') } }>Click me</VBtn>
+        <VList v-model:opened={ opened.value }>
+          <VListGroup value="Users">
+            {{
+              activator: ({ props }) => <VListItem { ...props } title="Users" />,
+              default: () => (
+                <>
+                  <VListItem title="Foo" />
+                  <VListItem title="Bar" />
+                </>
+              ),
+            }}
+          </VListGroup>
+        </VList>
+      </>
+    ))
+
+    cy.get('button').click()
+      .then(_ => {
+        expect(opened.value).to.deep.equal(['Users'])
+      })
+      .get('.v-list-group__items').should('be.visible')
+  })
 })

packages/vuetify/src/composables/nested/nested.ts

@@ -120,7 +120,7 @@ export const useNested = (props: NestedProps) => {
   const children = ref(new Map<unknown, unknown[]>())
   const parents = ref(new Map<unknown, unknown>())
 
-  const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(toRaw(v)), v => [...v.values()])
+  const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(v), v => [...v.values()])
 
   const activeStrategy = computed(() => {
     if (typeof props.activeStrategy === 'object') return props.activeStrategy
@@ -321,9 +321,9 @@ export const useNestedItem = (id: Ref<unknown>, isGroup: boolean) => {
   const item = {
     ...parent,
     id: computedId,
-    open: (open: boolean, e: Event) => parent.root.open(toRaw(computedId.value), open, e),
+    open: (open: boolean, e: Event) => parent.root.open(computedId.value, open, e),
     openOnSelect: (open: boolean, e?: Event) => parent.root.openOnSelect(computedId.value, open, e),
-    isOpen: computed(() => parent.root.opened.value.has(toRaw(computedId.value))),
+    isOpen: computed(() => parent.root.opened.value.has(computedId.value)),
     parent: computed(() => parent.root.parents.value.get(computedId.value)),
     activate: (activated: boolean, e?: Event) => parent.root.activate(computedId.value, activated, e),
     isActivated: computed(() => parent.root.activated.value.has(toRaw(computedId.value))),

packages/vuetify/src/composables/nested/openStrategies.ts

@@ -1,6 +1,3 @@
-// Utilities
-import { toRaw } from 'vue'
-
 export type OpenStrategyFn = (data: {
   id: unknown
   value: boolean
@@ -50,12 +47,12 @@ export const singleOpenStrategy: OpenStrategy = {
 export const multipleOpenStrategy: OpenStrategy = {
   open: ({ id, value, opened, parents }) => {
     if (value) {
-      let parent = toRaw(parents.get(id))
+      let parent = parents.get(id)
       opened.add(id)
 
       while (parent != null && parent !== id) {
         opened.add(parent)
-        parent = toRaw(parents.get(parent))
+        parent = parents.get(parent)
       }
 
       return opened

packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.cy.tsx

@@ -300,6 +300,22 @@ describe('VTreeview', () => {
 
   describe('return-object', () => {
     describe('open', () => {
+      it('open and collapse should both work', () => {
+        cy.mount(() => (
+          <>
+            <VTreeview
+              items={ items.value }
+              item-title="title"
+              item-value="id"
+              return-object
+            />
+          </>
+        ))
+          .get('.v-list-item-action .v-btn').eq(0).click()
+          .get('.v-list-group__items').eq(0).should('be.visible')
+          .get('.v-list-item-action .v-btn').eq(0).click()
+          .get('.v-list-group__items').eq(0).should('not.be.visible')
+      })
       it('opan-all should work', () => {
         cy.mount(() => (
           <>