diff --git a/packages/core/src/composables/useWatchProps.ts b/packages/core/src/composables/useWatchProps.ts index c0d5f240..8b58c2d5 100644 --- a/packages/core/src/composables/useWatchProps.ts +++ b/packages/core/src/composables/useWatchProps.ts @@ -1,5 +1,5 @@ -import type { Ref, ToRefs } from 'vue' -import { effectScope, nextTick, onScopeDispose, watch } from 'vue' +import type { ToRefs } from 'vue' +import { effectScope, isRef, nextTick, onScopeDispose, watch } from 'vue' import type { WatchPausableReturn } from '@vueuse/core' import { toRef, watchPausable } from '@vueuse/core' import type { Connection, FlowProps, VueFlowStore } from '~/types' @@ -10,7 +10,7 @@ export function useWatchProps( props: FlowProps, store: VueFlowStore, ) { - const scope = effectScope() + const scope = effectScope(true) scope.run(() => { const watchModelValue = () => { @@ -285,22 +285,26 @@ export function useWatchProps( 'autoConnect', ] - Object.keys(props).forEach((prop) => { - if (!skip.includes(prop as keyof typeof props)) { - const model = toRef(() => prop) - const storeRef = store[prop as keyof typeof store] as typeof model as Ref + Object.keys(props).forEach((key) => { + const propKey = key as keyof typeof props + if (!skip.includes(propKey)) { + const propValue = toRef(() => props[propKey]) - scope.run(() => { - watch( - model, - (nextValue) => { - if (isDef(nextValue)) { - storeRef.value = nextValue - } - }, - { flush: 'pre' }, - ) - }) + const storeRef = store[propKey as keyof typeof store] + + if (isRef(storeRef)) { + scope.run(() => { + watch( + propValue, + (nextValue) => { + if (isDef(nextValue)) { + ;(storeRef.value as any) = nextValue + } + }, + { immediate: true, flush: 'pre' }, + ) + }) + } } }) }