From ad07b5b6ead909f686e248c29e8b5c147d8dd96c Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 21 Apr 2022 12:00:22 +0200
Subject: [PATCH] fix: Dispose effects on unmount

# What's changed?

* Dispose prop watcher effects and event bindings when vue flow is unmounted/its scope is disposed
---
 package/src/container/VueFlow/VueFlow.vue | 3 ++-
 package/src/container/VueFlow/watch.ts    | 6 ++++--
 package/src/store/hooks.ts                | 8 +++++++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/package/src/container/VueFlow/VueFlow.vue b/package/src/container/VueFlow/VueFlow.vue
index dbbd67b7..ddc8969f 100644
--- a/package/src/container/VueFlow/VueFlow.vue
+++ b/package/src/container/VueFlow/VueFlow.vue
@@ -32,7 +32,8 @@ const modelProps = useVModels(props, emit)
 
 const { id, hooks, getNodeTypes, getEdgeTypes, ...rest } = useVueFlow()
 
-useWatch(modelProps, { id, hooks, getNodeTypes, getEdgeTypes, ...rest })
+const dispose = useWatch(modelProps, { id, hooks, getNodeTypes, getEdgeTypes, ...rest })
+onUnmounted(() => dispose())
 
 useHooks(emit, hooks.value)
 
diff --git a/package/src/container/VueFlow/watch.ts b/package/src/container/VueFlow/watch.ts
index 567f127d..a66edb39 100644
--- a/package/src/container/VueFlow/watch.ts
+++ b/package/src/container/VueFlow/watch.ts
@@ -4,9 +4,9 @@ import { FlowProps, UseVueFlow } from '~/types'
 
 const isDef = <T>(val: T): val is NonNullable<T> => typeof val !== 'undefined'
 export default (models: ToRefs<FlowProps>, store: UseVueFlow) => {
-  const scope = getCurrentScope()
+  const scope = effectScope()
 
-  scope?.run(() => {
+  scope.run(() => {
     const watchModelValue = () => {
       scope.run(() => {
         let pauseModel: WatchPausableReturn
@@ -185,4 +185,6 @@ export default (models: ToRefs<FlowProps>, store: UseVueFlow) => {
       }
     })
   })
+
+  return () => scope.stop()
 }
diff --git a/package/src/store/hooks.ts b/package/src/store/hooks.ts
index e2614e84..62d62654 100644
--- a/package/src/store/hooks.ts
+++ b/package/src/store/hooks.ts
@@ -43,8 +43,14 @@ export const createHooks = (): FlowHooks => ({
 
 const bind = (emit: EmitFunc, hooks: FlowHooks) => {
   for (const [key, value] of Object.entries(hooks)) {
-    value.on((data) => {
+    const listener = (data: any) => {
       emit(key as keyof FlowHooks, data)
+    }
+
+    value.on(listener)
+
+    onScopeDispose(() => {
+      value.off(listener)
     })
   }
 }