fix(core): watch applyDefault state in useVueFlow scope

Author: bcakmakoglu

packages/core/src/composables/useVueFlow.ts

@@ -1,8 +1,8 @@
 import { toRefs, tryOnScopeDispose } from '@vueuse/core'
 import type { EffectScope } from 'vue'
-import { computed, getCurrentScope, inject, provide, reactive } from 'vue'
+import { computed, getCurrentScope, inject, provide, reactive, watch } from 'vue'
 import { useActions, useGetters, useState } from '~/store'
-import type { FlowOptions, FlowProps, State, VueFlowStore } from '~/types'
+import type { EdgeChange, FlowOptions, FlowProps, NodeChange, State, VueFlowStore } from '~/types'
 import { VueFlow } from '~/context'
 import { warn } from '~/utils'
 
@@ -127,10 +127,36 @@ export function useVueFlow(options?: FlowProps): VueFlowStore {
   if (!vueFlow || (vueFlow && id && id !== vueFlow.id)) {
     const name = id ?? storage.getId()
 
-    vueFlow = storage.create(name, options)
+    const state = storage.create(name, options)
+
+    vueFlow = state
 
     if (scope) {
       isParentScope = true
+
+      scope.run(() => {
+        watch(
+          state.applyDefault,
+          (shouldApplyDefault) => {
+            const nodesChangeHandler = (changes: NodeChange[]) => {
+              state.applyNodeChanges(changes)
+            }
+
+            const edgesChangeHandler = (changes: EdgeChange[]) => {
+              state.applyEdgeChanges(changes)
+            }
+
+            if (shouldApplyDefault) {
+              state.onNodesChange(nodesChangeHandler)
+              state.onEdgesChange(edgesChangeHandler)
+            } else {
+              state.hooks.value.nodesChange.off(nodesChangeHandler)
+              state.hooks.value.edgesChange.off(edgesChangeHandler)
+            }
+          },
+          { immediate: true },
+        )
+      })
     }
   } else {
     // if composable was called with additional options after initialization, overwrite state with the options values

packages/core/src/composables/useWatchProps.ts

@@ -213,25 +213,6 @@ export function useWatchProps(
             }
           },
         )
-
-        watch(
-          store.applyDefault,
-          (_, __, onCleanup) => {
-            if (store.applyDefault.value) {
-              store.onNodesChange(store.applyNodeChanges)
-              store.onEdgesChange(store.applyEdgeChanges)
-            } else {
-              store.hooks.value.nodesChange.off(store.applyNodeChanges)
-              store.hooks.value.edgesChange.off(store.applyEdgeChanges)
-            }
-
-            onCleanup(() => {
-              store.hooks.value.nodesChange.off(store.applyNodeChanges)
-              store.hooks.value.edgesChange.off(store.applyEdgeChanges)
-            })
-          },
-          { immediate: true },
-        )
       })
     }
 
@@ -310,18 +291,20 @@ export function useWatchProps(
       })
     }
 
-    ;[
-      watchModelValue,
-      watchNodesValue,
-      watchEdgesValue,
-      watchMinZoom,
-      watchMaxZoom,
-      watchTranslateExtent,
-      watchNodeExtent,
-      watchApplyDefault,
-      watchAutoConnect,
-      watchRest,
-    ].forEach((watch) => watch())
+    const runAll = () => {
+      watchModelValue()
+      watchNodesValue()
+      watchEdgesValue()
+      watchMinZoom()
+      watchMaxZoom()
+      watchTranslateExtent()
+      watchNodeExtent()
+      watchApplyDefault()
+      watchAutoConnect()
+      watchRest()
+    }
+
+    runAll()
   })
 
   return () => scope.stop()