fix(core): element watcher not emitting changes with addNodes / addEdges

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/core/src/utils/watch.ts

@@ -16,7 +16,7 @@ export const useWatch = (
         let pauseModel: WatchPausableReturn
         let pauseStore: WatchPausableReturn
 
-        const immediate = !!(models.modelValue && models.modelValue.value && models.modelValue.value.length)
+        const immediate = !!(models.modelValue && models.modelValue.value)
 
         // eslint-disable-next-line prefer-const
         pauseModel = watchPausable(
@@ -25,8 +25,17 @@ export const useWatch = (
             if (elements && Array.isArray(elements)) {
               pauseStore?.pause()
 
-              store.setElements(elements)
+              if (models.modelValue?.value?.length) store.setElements(elements)
 
+              nextTick(() => {
+                pauseStore?.resume()
+              })
+            }
+          },
+          { immediate },
+        )
+
+        nextTick(() => {
           pauseStore = watchPausable(
             [store.nodes, store.edges, () => store.edges.value.length, () => store.nodes.value.length],
             ([nodes, edges]) => {
@@ -40,16 +49,9 @@ export const useWatch = (
                 })
               }
             },
-                { immediate: true },
-              )
-
-              nextTick(() => {
-                pauseStore?.resume()
-              })
-            }
-          },
             { immediate },
           )
+        })
 
         onScopeDispose(() => {
           pauseModel?.stop()
@@ -63,7 +65,7 @@ export const useWatch = (
         let pauseModel: WatchPausableReturn
         let pauseStore: WatchPausableReturn
 
-        const immediate = !!(models.nodes && models.nodes.value && models.nodes.value.length)
+        const immediate = !!(models.nodes && models.nodes.value)
 
         // eslint-disable-next-line prefer-const
         pauseModel = watchPausable(
@@ -74,6 +76,15 @@ export const useWatch = (
 
               store.setNodes(nodes)
 
+              nextTick(() => {
+                pauseStore?.resume()
+              })
+            }
+          },
+          { immediate },
+        )
+
+        nextTick(() => {
           pauseStore = watchPausable(
             [store.nodes, () => store.nodes.value.length],
             ([nodes]) => {
@@ -87,16 +98,9 @@ export const useWatch = (
                 })
               }
             },
-                { immediate: true },
-              )
-
-              nextTick(() => {
-                pauseStore?.resume()
-              })
-            }
-          },
             { immediate },
           )
+        })
 
         onScopeDispose(() => {
           pauseModel?.stop()
@@ -110,7 +114,7 @@ export const useWatch = (
         let pauseModel: WatchPausableReturn
         let pauseStore: WatchPausableReturn
 
-        const immediate = !!(models.edges && models.edges.value && models.edges.value.length)
+        const immediate = !!(models.edges && models.edges.value)
 
         // eslint-disable-next-line prefer-const
         pauseModel = watchPausable(
@@ -121,6 +125,15 @@ export const useWatch = (
 
               store.setEdges(edges)
 
+              nextTick(() => {
+                pauseStore?.resume()
+              })
+            }
+          },
+          { immediate },
+        )
+
+        nextTick(() => {
           pauseStore = watchPausable(
             [store.edges, () => store.edges.value.length],
             ([edges]) => {
@@ -134,16 +147,9 @@ export const useWatch = (
                 })
               }
             },
-                { immediate: true },
-              )
-
-              nextTick(() => {
-                pauseStore?.resume()
-              })
-            }
-          },
             { immediate },
           )
+        })
 
         onScopeDispose(() => {
           pauseModel?.stop()