fix(edges): Handles emitting connect and update simulteanously

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/components/Handle/Handle.vue

@@ -4,7 +4,7 @@ import { Position } from '../../types'
 import { NodeId } from '../../context'
 import type { HandleProps } from '../../types/components'
 
-const { id } = useVueFlow()
+const { id, hooks } = useVueFlow()
 const props = withDefaults(defineProps<HandleProps>(), {
   id: '',
   type: 'source',
@@ -16,7 +16,9 @@ const nodeId = inject(NodeId, '')
 
 const handler = useHandle()
 const onMouseDownHandler = (event: MouseEvent) =>
-  handler(event, props.id, nodeId, props.type === 'target', props.isValidConnection)
+  handler(event, props.id, nodeId, props.type === 'target', props.isValidConnection, undefined, (connection) =>
+    hooks.value.connect.trigger(connection),
+  )
 </script>
 <script lang="ts">
 export default {

src/composables/useHandle.ts

@@ -149,7 +149,6 @@ export default (store: FlowStore = useVueFlow().store) =>
       const isOwnHandle = connection.source === connection.target
 
       if (isValid && !isOwnHandle) {
-        store.hooks.connect.trigger(connection)
         onEdgeUpdate?.(connection)
       }