fix(VTreeview): match loading state with opened node

[J-Sek]

Description

fixes #19390

Currently I need to add value to the initial items to make the loading animation stick to the clicked node. But it should respect item-value.

Needs to be coordinated with #20364 Updated

Markup:

<template>
  <v-card class="ma-4">
    <v-toolbar class="bg-indigo text-h5">
      <span class="pl-6">User Directory</span>
      <v-spacer />
      <v-btn @click="reset" prepend-icon="mdi-reload">Reset</v-btn>
    </v-toolbar>

    <div class="pa-4">
      <v-treeview
        :items="items"
        v-model:opened="open"
        :load-children="loadChildren"
        density="compact"
        item-title="name"
        item-value="id"
        open-on-click
        transition
      >
        <template v-slot:prepend="{ item }">
          <v-icon
            v-if="!item.children"
            :icon="item.isAlbum ? 'mdi-image' : 'mdi-account'"
          />
        </template>
      </v-treeview>
    </div>
  </v-card>
</template>

<script>
  const pause = ms => new Promise(resolve => setTimeout(resolve, ms))

  export default {
    data: () => ({
      open: [],
      users: [],
      albums: [],
    }),

    computed: {
      items() {
        return [
          { id: 11, name: 'Users', children: this.users },
          { id: 12, name: 'Albums', children: this.albums },
        ]
      },
    },

    methods: {
      reset() {
        this.users = []
        this.albums = []
        this.open = []
      },
      async loadChildren(item) {
        switch (item.name) {
          case 'Users': await this.fetchUsers(); break;
          case 'Albums': await this.fetchAlbums(); break;
          default: break;
        }
      },
      async fetchUsers(item) {
        await pause(1000)
        return fetch('https://jsonplaceholder.typicode.com/users')
          .then(res => res.json())
          .then(
            newItems =>
              (this.users = newItems
                .slice(0, 5)
                .map(x => ({ id: x.id, name: x.name })))
          )
      },
      async fetchAlbums(item) {
        await pause(1000)
        return fetch('https://jsonplaceholder.typicode.com/albums')
          .then(res => res.json())
          .then(
            newItems =>
              (this.albums = newItems
                .slice(0, 10)
                .map(x => ({ id: x.id, name: x.title, isAlbum: true })))
          )
      },
    },
  }
</script>