Fix the watch source warning

Author: grapoza

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 <[email protected]>",
   "license": "MIT",

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]);
 

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) => {