From fb9c27c15cce11d8595c6c2993c322586324c46f Mon Sep 17 00:00:00 2001
From: Gregg Rapoza <grapoza@gmail.com>
Date: Sun, 20 Oct 2024 12:24:07 -0400
Subject: [PATCH] Fix the watch source warning

---
 package.json                    | 2 +-
 src/components/TreeView.vue     | 8 ++------
 src/components/TreeViewNode.vue | 6 +++---
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index cb48075..e236b94 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@grapoza/vue-tree",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "description": "Tree components for Vue 3",
   "author": "Gregg Rapoza <grapoza@gmail.com>",
   "license": "MIT",
diff --git a/src/components/TreeView.vue b/src/components/TreeView.vue
index f829341..ed4bf79 100644
--- a/src/components/TreeView.vue
+++ b/src/components/TreeView.vue
@@ -57,7 +57,7 @@
 </template>
 
 <script setup>
-import { computed, nextTick, ref, readonly, onMounted, provide, toRef, watch } from 'vue'
+import { computed, nextTick, ref, readonly, onMounted, provide, toRef, watchEffect } from 'vue'
 import SelectionMode from '../enums/selectionMode.js';
 import { useIdGeneration } from '../composables/idGeneration.js'
 import { useTreeViewTraversal } from '../composables/treeViewTraversal.js'
@@ -224,11 +224,7 @@ const { spliceNodeList } = useTreeViewDataUpdates(model, metaModel);
 useTreeViewFilter(metaModel);
 
 // Watch the model to make sure the metamodel is kept in sync
-watch([model, model.value], () => {
-  // WARNINGS: For whatever reason, the Storybook stories don't fire this watch when model is updated unless the
-  // model.value is also included in the watch. This is a workaround for that issue. I have no idea why this is happening.
-  // However, it also (rightly) adds warnings in the console that model.value is not a valid watch source.
-
+watchEffect(() => {
   model.value.forEach((node, index) => {
     const metaIndex = metaModel.value.findIndex((m) => m.data[m.idProperty] === node[m.idProperty]);
 
diff --git a/src/components/TreeViewNode.vue b/src/components/TreeViewNode.vue
index 4a22d68..bdcffc6 100644
--- a/src/components/TreeViewNode.vue
+++ b/src/components/TreeViewNode.vue
@@ -238,7 +238,7 @@
 
 <script setup>
 
-import { computed, ref, toRef, watch } from 'vue'
+import { computed, ref, toRef, watchEffect } from 'vue'
 import { useNodeDataNormalizer } from '../composables/nodeDataNormalizer.js';
 import { useChildren } from '../composables/children/children.js';
 import { useTreeViewNodeChildren } from '../composables/children/treeViewNodeChildren.js';
@@ -412,9 +412,9 @@ const {
 } = useTreeViewNodeDragAndDrop(metaModel, treeId, emit);
 
 // Watch the model children to make sure the metamodel is kept in sync
-watch([getChildren(metaModel), () => getChildren(metaModel)], () => {
+watchEffect(() => {
   // Patch the meta children to match the data children
-  const metaChildren = metaModel.value.childMetaModels;
+  const metaChildren = children.value;
   const dataChildren = getChildren(metaModel);
 
   dataChildren.forEach((node, index) => {