fix(nested): avoid console warnings when updating items order

[J-Sek]

• ensure "register" is always called after "unregister" when moving nodes around
• detect changed ID (when items are swapped or prepended to the list)

fixes #20934
closes #21890

Markup:

<template>
  <v-app theme="dark">
    <v-container class="d-flex flex-column ga-3" max-width="600">

      <v-alert color="blue-darken-3" text="1. move [Calendar] left" />
      <v-alert color="blue-darken-3" text="2. move [Dev Tools] right few times" />

      <v-treeview
        v-model:activated="activated"
        :items="items"
        item-value="title"
        activatable
        open-all
      >
        <template #append="{ item, depth, isFirst, isLast }">
          <v-icon-btn :disabled="!depth" icon="mdi-arrow-left" @click.stop="move(item, 'left')" />
          <v-icon-btn :disabled="isFirst" icon="mdi-arrow-up" @click.stop="move(item, 'up')" />
          <v-icon-btn :disabled="isLast" icon="mdi-arrow-down" @click.stop="move(item, 'down')" />
          <v-icon-btn :disabled="isFirst" icon="mdi-arrow-right" @click.stop="move(item, 'right')" />
        </template>
      </v-treeview>

    </v-container>
  </v-app>
</template>
<script setup>
  import { ref, shallowRef } from 'vue'

  const activated = ref([])
  const root = {
    id: 0,
    children: [
      {
        id: 1,
        title: 'Office Tools',
        children: [
          {
            id: 2,
            title: 'Calendar',
            children: [
              { id: 3, title: 'Notepad' },
            ],
          },
        ],
      },
      {
        id: 4,
        title: 'Dev Tools',
        children: [
          { id: 5, title: 'VS Code' },
          { id: 6, title: 'Figma' },
          { id: 7, title: 'Webstorm' },
        ],
      },
    ],
  }
  const items = shallowRef([...root.children])

  function findParent (id, items = [root]) {
    if (items.length === 0) return null
    return items.find(item => item.children?.some(c => c.id === id)) ??
      findParent(id, items.flatMap(item => item.children ?? []))
  }

  function findItemBefore (item) {
    return findParent(item.id).children
      .find((_, i, all) => all[i + 1]?.id === item.id)
  }

  function findItemAfter (item) {
    return findParent(item.id).children
      .find((_, i, all) => all[i - 1]?.id === item.id)
  }

  function detach (item) {
    const parent = findParent(item.id)
    parent.children.splice(parent.children.indexOf(item), 1)
    if (parent.children.length === 0) parent.children = undefined
  }

  function injectNextTo (item, target, after = true) {
    if (!target || target === root) return
    detach(item)
    const targetParent = findParent(target.id)
    targetParent.children.splice(targetParent.children.indexOf(target) + (after ? 1 : 0), 0, item)
    activated.value = [item.id]
  }

  function appendTo (item, target) {
    if (!target) return
    detach(item)
    target.children ??= []
    target.children.push(item)
    activated.value = [item.id]
  }

  function move (item, direction) {
    switch (direction) {
      case 'left':
        injectNextTo(item, findParent(item.id))
        break
      case 'up':
        injectNextTo(item, findItemBefore(item), false)
        break
      case 'right':
        appendTo(item, findItemBefore(item))
        break
      case 'down':
        injectNextTo(item, findItemAfter(item))
        break
    }
    items.value = [...root.children]
  }
</script>