[Bug Report][3.9.0] v-treeview parents aren't selected if selection is computed property and items are added in future

[AndreasMietk]

Environment

Vuetify Version: 3.9.0
Vue Version: 3.5.17
Browsers: Edge 138.0.0.0
OS: Linux x86_64

Steps to reproduce

1. Use a computed() with getter/setter for the v-model:selected prop
2. Add "selected" items to the original array used to as the base for the computed selection
3. Parents in the three aren't selected

Expected Behavior

3. Parents should be selected/ in intermediate state

Actual Behavior

3. Parents are not selected in indeterminate state

Reproduction Link

https://play.vuetifyjs.com/#...

[AndreasMietk]

<template>
  <v-app>
    <v-treeview
      v-model:selected="selected"
      item-children="deep.nested"
      :items="items"
      return-object
      selectable
      select-strategy="classic"
      open-all
    ></v-treeview>
  </v-app>
</template>

<script setup lang="ts">
  import { onMounted, computed, toRaw } from 'vue'
  import { reactive } from 'vue'

  const selected = computed({
      get: () => {
        const _selected = []
        for (const selectable of items) {
          const areSelected = selectable.deep.nested.filter(child => child.selected)
          _selected.push(...areSelected)
        }
        return _selected
      },
      set: (value) => {
        for (const selectable of items) {
          for (const child of selectable.deep.nested) {
            child.selected = value.includes(toRaw(child)) || value.includes(child)
          }
        }
      }
    }
  )

  const items = reactive([
    {
      title: 'Old 1',
      deep: {
        nested: [
          {
            title: 'Nested',
            selected: false
          },
          {
            title: 'Nested',
            selected: true
          },

        ]
      }
    },
    {
      title: 'Old 2',
      deep: {
        nested: [
          {
            title: 'Nested',
            selected: true
          },
        ]
      }
    }
    ])

  onMounted(async () => {
    await new Promise(resolve => setTimeout(resolve, 1500))

    const newItem = {
      title: 'Bugged 1 (should be selected)',
      deep: {
        nested: [
          {
            title: 'Bugged Nested',
            selected: true
          }
        ]
      }
    }

    const newItem2 = {
      title: 'Bugged 2 (should be indeterminate)',
      deep: {
        nested: [
          {
            title: 'Bugged Nested',
            selected: true
          },
          {
            title: 'Bugged Nested',
            selected: false
          }
        ]
      }
    }

    items.push(newItem)
    items.push(newItem2)
  })
</script>

[J-Sek]

The issue seems to be caused by "immediate" (relatively) change of selected.
I was able to fix it by changing computed to a ref with 2 watchers. The one reacting to items change has await nextTick() and it seems to make the whole thing work. Playground

There was however a different issue I have encounter. When I reset the element with key (put after 5s overall delay), the parent selection disappears. It might be a material for another issue in case this one does not classify for a bug. I have a feeling both could be addressed with a single patch.

[AndreasMietk]

I applied the ref+watcher workaround too.

IIRC while debugging i noticed that it has something todo with https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/nested/nested.ts#L238 and/or https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/nested/selectStrategies.ts#L144 because the parent was missing for the child. I didn't make it throught the whole logic of this code, though 😅.

[AndreasMietk]

BTW in 3.8.12 it works as expected. Im guessing this commit does break it:

36c55ed

[bulatgab]

We ran into the same (?) issue. Simple reproduction: https://play.vuetifyjs.com/#eNqdU8tugzAQ/JWVe0gj8VBCkqqIROqp9/aY5ODgTWPJAWQb2grx7zVQE2hQ1NYXdnd2Zj3G3pZEydh/yjKvyJGEJNJ4zgTVuNklAGUJCgXGGhlUVV2JCldLxILje50CFO45ZShC27feERvuSNsSciOqDNB8bbVO3IKKHGuka27J9CCwn7tKS7Opt0/TGwuqFI8tIc0wcakQdeabXUd+z4JJVSx5phs7+JGlUgPDI82FhrIVYFTTEO6nsN7A/XfNzkUWwjZwFs5q71ikcWHKNjfHdAkNbCizrrlemmuBIUxe0lRPBkh84oJJTAZqV4pWdT7g9pVfT2kuGByw2/Zwzs1ZzbxmQOB0is+SJqyhwN1sAtWVnOUsxjnzMc7lDNv1s2PU9fIXrnnCUKM888T89n9ZX43bCG5ZfxjnLP5uvY9eEFutpk1g3l/kd7eZVA4JvKU3C0gdPHpz4hypUOgMXnRb238B9CsL3g==

[J-Sek]

Workaround (until we figure out the patch):

data: () => ({
  selected: [],
  //...
}),
mounted() {
  this.selected = [3,4,6]
},

[BotellaA]

Any plan to work on this issue? 💪

[hannelevaltanen]

Possible Related Issue

When using select-strategy="classic", the parent element is not selectable until its children are loaded.

Reproduction Steps:

play.vuetifyjs.com

1. Attempt to select the parent element before the children have loaded.
2. Observe that selection is not possible.

Expected Behavior:
The parent element should be selectable regardless of whether its children are loaded.

Additional Note:
With select-strategy="trunk", the parent element is selectable as expected, even before children are loaded.