fix(VList, VTreeview): item should be selectable when disabled changes

[J-Sek]

fixes #22366

classic selection requires refresh to re-evaluate on/off/indeterminate, but currently it is only run for selection interactions, so it will set new "disabled" items to "off" and the visual state becomes out of sync

Simply forcing the in(...) call with selected.value = new Map(selected.value) could help, but has other unintended consequences. Leaving it as-is. Improvement may be breaking and should be evaluated for v4.x

Markup:

<template>
  <v-app theme="dark">
    <v-container max-width="800">
      <v-switch v-model="locked" label="lock edits (some nodes)" hide-details />

      <div class="d-flex ga-8">
        <v-list
          v-model:selected="selected"
          :items="items"
          :opened="[1, 5, 6, 10]"
          class="flex-1-1-0"
          collapse-icon=""
          item-value="id"
          select-strategy="classic"
          item-props
          @update:opened=""
        >
          <template #header="{ props }">
            <v-list-item v-bind="props" :ripple="false" tabindex="-1">
              <template #prepend="{ isIndeterminate, isSelected, select }">
                <v-checkbox-btn
                  :indeterminate="isIndeterminate"
                  :model-value="isSelected"
                  @click.prevent="select(!isSelected)"
                  @keydown.enter="select(!isSelected)"
                />
              </template>
            </v-list-item>
          </template>
          <template #item="{ props }">
            <v-list-item v-bind="props" :ripple="false" tabindex="-1">
              <template #prepend="{ isIndeterminate, isSelected, select }">
                <v-checkbox-btn
                  :indeterminate="isIndeterminate"
                  :model-value="isSelected"
                  @click.prevent="select(!isSelected)"
                  @keydown.enter="select(!isSelected)"
                />
              </template>
              <template #append="{ isDisabled }">
                <v-icon v-if="isDisabled" icon="mdi-lock" size="20" />
              </template>
            </v-list-item>
          </template>
        </v-list>
        <v-treeview
          v-model:selected="selected"
          :items="items"
          :opened="[1, 5, 6, 10]"
          class="flex-1-1-0"
          collapse-icon=""
          item-value="id"
          select-strategy="classic"
          item-props
          selectable
          @update:opened=""
        />
      </div>
      <pre class="mt-6">selected: {{ String(selected) }}</pre>
    </v-container>
  </v-app>
</template>

<script setup>
  import { computed, ref } from 'vue'

  const locked = ref(true)
  const selected = ref([])
  const items = computed(() => [
    {
      id: 1,
      title: 'Applications :',
      children: [
        { id: 2, title: 'Calendar', disabled: locked.value },
        { id: 3, title: 'Chrome' },
        { id: 4, title: 'Webstorm' },
      ],
    },
    {
      id: 5,
      title: 'Documents :',
      children: [
        {
          id: 6,
          title: 'Taxes :',
          children: [
            { id: 8, title: 'Report 2024.xlsx', disabled: locked.value },
            { id: 9, title: 'Report 2025.xlsx', disabled: locked.value },
          ],
        },
      ],
    },
    {
      id: 10,
      title: 'Other :',
      disabled: locked.value,
      children: [
        { id: 11, title: 'other doc 1' },
        { id: 12, title: 'other doc 2' },
      ],
    },
  ])
</script>