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,10 +49,11 @@ export const createHooks = (): FlowHooks => ({
   updateNodeInternals: createEventHook(),
 })
 
-const bind = (emit: Emits, hooks: FlowHooks) => {
+export default (emit: Emits, hooks: Ref<FlowHooks>) => {
-  for (const [key, value] of Object.entries(hooks)) {
+  onBeforeMount(() => {
+    for (const [key, value] of Object.entries(hooks.value)) {
       const listener = (data: any) => {
-      emit(key as any, data)
+        emit(key as Emits extends (event: infer Event) => void ? Event : never, data)
       }
 
       value.on(listener)
@@ -60,6 +62,5 @@ const bind = (emit: Emits, hooks: FlowHooks) => {
         value.off(listener)
       })
     }
+  })
 }
-
-export default (emit: Emits, hooks: FlowHooks) => bind(emit, hooks)