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

@@ -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)
 

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()
 }

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)
     })
   }
 }