From 7d19bd556f022bf236e611a302b3ec2842306dbe Mon Sep 17 00:00:00 2001
From: MathieuDerelle <mathieu@purchease.com>
Date: Thu, 2 Nov 2023 15:05:54 +0100
Subject: [PATCH] fix: do not mutate `children` in deeper levels

---
 src/DraggableTreeviewNode.vue | 31 ++++++++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/DraggableTreeviewNode.vue b/src/DraggableTreeviewNode.vue
index aa12b726..2705f2b3 100644
--- a/src/DraggableTreeviewNode.vue
+++ b/src/DraggableTreeviewNode.vue
@@ -39,7 +39,7 @@
         :group="group"
         :value="value.children"
         ghost-class="ghost"
-        @input="updateValue"
+        @change="updateValue"
       >
         <treeview-node
           v-for="child in value.children"
@@ -109,7 +109,10 @@ export default Vue.extend({
   data() {
     return {
       open: false,
-      localValue: { ...this.value } as TreeItem,
+      localValue: {
+        ...this.value,
+        children: [...this.value.children],
+      } as TreeItem,
     };
   },
   computed: {
@@ -125,12 +128,30 @@ export default Vue.extend({
   },
   watch: {
     value(value): void {
-      this.localValue = { ...value };
+      this.localValue = {
+        ...value,
+        children: [...this.value.children],
+      };
     },
   },
   methods: {
-    updateValue(value: TreeItem[]): void {
-      this.localValue.children = [...value];
+    updateValue($event: any): void {
+      // removing must be done before adding
+      // in order for the event `moved` to work properly
+      const dataForRemoving = $event.removed || $event.moved;
+      if (dataForRemoving) {
+        this.localValue.children.splice(dataForRemoving.oldIndex, 1);
+      }
+
+      const dataForAdding = $event.added || $event.moved;
+      if (dataForAdding) {
+        this.localValue.children.splice(
+          dataForAdding.newIndex,
+          0,
+          dataForAdding.element
+        );
+      }
+
       this.$emit("input", this.localValue);
     },
     updateChildValue(value: TreeItem): void {