From 9440d4fe856379531e288c68074d5b52abf3c692 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 25 Aug 2022 13:22:29 +0200
Subject: [PATCH] fix: cast watchable props to ref

---
 packages/vue-flow/src/container/VueFlow/watch.ts | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/vue-flow/src/container/VueFlow/watch.ts b/packages/vue-flow/src/container/VueFlow/watch.ts
index 7b6be81b..18667c42 100644
--- a/packages/vue-flow/src/container/VueFlow/watch.ts
+++ b/packages/vue-flow/src/container/VueFlow/watch.ts
@@ -1,9 +1,10 @@
-import type { Ref, ToRefs } from 'vue'
+import type { ToRefs } from 'vue'
 import type { WatchPausableReturn } from '@vueuse/core'
 import { isFunction } from '@vueuse/core'
 import type { Connection, FlowProps, GraphEdge, GraphNode, VueFlowStore } from '~/types'
 
-const isDef = <T>(val: T): val is NonNullable<T> => typeof val !== 'undefined'
+const isDef = <T>(val: T): val is NonNullable<T> => typeof unref(val) !== 'undefined'
+
 export default (models: ToRefs<Pick<FlowProps, 'nodes' | 'edges' | 'modelValue'>>, props: FlowProps, store: VueFlowStore) => {
   const scope = effectScope()
 
@@ -237,15 +238,15 @@ export default (models: ToRefs<Pick<FlowProps, 'nodes' | 'edges' | 'modelValue'>
       const skip = ['id', 'modelValue', 'translateExtent', 'edges', 'nodes', 'maxZoom', 'minZoom', 'applyDefault', 'autoConnect']
       Object.keys(props).forEach((prop) => {
         if (!skip.includes(prop)) {
-          const model = props[prop as keyof typeof props]
-          const storedValue = (<any>store)[prop] as Ref
+          const model = toRef(props, prop as keyof typeof props)
+          const storedValue = store[prop as keyof typeof store] as typeof model
 
           scope.run(() => {
             watch(
-              () => model,
+              model,
               () => {
                 if (isDef(model)) {
-                  storedValue.value = model
+                  storedValue.value = model.value
                 }
               },
               { immediate: isDef(model) },