Vuetify Treeview - moved items are not selectable when clicking on parent node

Question

I'm trying to move selected treeview items to another parent and it works except moved items are not selectable anymore when clicking on their new parent node.

Steps to reproduce:

• select node2_item1
• click the Move to node1 button
• select node1

I'm using VueJS 2.6.14 & Vuetify 2.6.4

    <template>
      <v-container>
        <v-row>
          <v-col>
            <v-treeview
              v-model="treeSelection"
              :items="tree"
              dense
              selectable
              return-object
              open-all
            >
            </v-treeview>
          </v-col>
          <v-col class="col-9">
            <v-btn class="mt-2" @click="moveSelectedItems('node1')">Move to node1</v-btn>
            <v-spacer></v-spacer>
            <v-btn class="mt-2" @click="moveSelectedItems('node2')">Move to node2</v-btn>
          </v-col>
        </v-row>
      </v-container>
    </template>

    <script>
    export default {
    name: "TestTree",

    data() {
      return {
        treeSelection: [],
        items: {
          node1: ["node1_item1", "node1_item2", "node1_item3", "node1_item4"],
          node2: ["node2_item1", "node2_item2"]
        }
      };
    },

    computed: {
      tree() {
        let tree = [];

        for (const [node, items] of Object.entries(this.items)) {
          tree.push({
            id: node,
            name: node,
            children: items.map(n => ({
              id: n,
              name: n
            }))
          });
        }

        return tree;
      }
    },

    methods: {
      moveSelectedItems(nodeName) {
        if (this.treeSelection.length) {
          const selectedItems = this.treeSelection.map(el => el.id);
          let oldNodes = new Set();

          for (const itemId of selectedItems) {
            for (const [oldNodeName, items] of Object.entries(this.items)) {
              if (items.includes(itemId)) {
                oldNodes.add(oldNodeName);
              }
            }
          }

          const oldNodeName = [...oldNodes][0];

          for (const itemId of selectedItems) {
            for (const items of this.items[oldNodeName]) {
              if (items.includes(itemId)) {
                const oldNodeItemIndex = this.items[oldNodeName].findIndex(
                  el => el === itemId
                );

                if (oldNodeItemIndex !== -1) {
                  this.items[oldNodeName].splice(oldNodeItemIndex, 1);
                }
              }
            }

            this.items[nodeName].push(itemId);
          }

          this.treeSelection = [];
        }
      }
    }
    };
    </script>

UPD collapsing node1 and expanding it back helps, but I'd like to refresh the tree programmatically somehow.

Answer 1

one of the solution will be to re-render treeview anyhow. So, i will suggest keep watch on treeSelection variable whenever its value changes increment the index [here][1] is the live demo

watch: {
      treeSelection: {
        handler(n) {
           this.treeKey++;
        }
      }
       
     },

and in template section bind key attribute

<v-treeview
              v-model="treeSelection"
              :items="tree"
              dense
              selectable
              return-object
              open-all
              :key="treeKey"
            >
            </v-treeview>

[1]: https://codepen.io/nileshku123132522/pen/poVaBWN?editors=1010)