refactor(store): re-bind hooks on mount and use hooks ref

packages/vue-flow/src/container/VueFlow/VueFlow.vue

@@ -127,7 +127,7 @@ onMounted(() => {
   vueFlowRef.value = el.value!
 })
 
-useHooks(emit, hooks.value)
+useHooks(emit, hooks)
 
 provide(Slots, useSlots())
 

packages/vue-flow/src/store/hooks.ts

@@ -1,3 +1,4 @@
+import type { Ref } from 'vue'
 import type { Emits, FlowHooks } from '~/types'
 
 // flow event hooks
@@ -48,18 +49,18 @@ export const createHooks = (): FlowHooks => ({
   updateNodeInternals: createEventHook(),
 })
 
-const bind = (emit: Emits, hooks: FlowHooks) => {
-  for (const [key, value] of Object.entries(hooks)) {
-    const listener = (data: any) => {
-      emit(key as any, data)
+export default (emit: Emits, hooks: Ref<FlowHooks>) => {
+  onBeforeMount(() => {
+    for (const [key, value] of Object.entries(hooks.value)) {
+      const listener = (data: any) => {
+        emit(key as Emits extends (event: infer Event) => void ? Event : never, data)
+      }
+
+      value.on(listener)
+
+      tryOnScopeDispose(() => {
+        value.off(listener)
+      })
     }
-
-    value.on(listener)
-
-    tryOnScopeDispose(() => {
-      value.off(listener)
-    })
-  }
+  })
 }
-
-export default (emit: Emits, hooks: FlowHooks) => bind(emit, hooks)