diff --git a/package/src/components/Handle/Handle.vue b/package/src/components/Handle/Handle.vue
index 1f9ff7d4..a64022b9 100644
--- a/package/src/components/Handle/Handle.vue
+++ b/package/src/components/Handle/Handle.vue
@@ -13,14 +13,32 @@ const props = withDefaults(defineProps<HandleProps>(), {
 
 const nodeId = inject(NodeId, '')
 
-const handleId = computed(() =>
-  props.id ?? connectionMode.value === ConnectionMode.Strict ? null : `${nodeId}__handle-${props.position}`,
+const handleId = computed(
+  () => props.id ?? (connectionMode.value === ConnectionMode.Strict ? null : `${nodeId}__handle-${props.position}`),
 )
 
 const { onMouseDown, onClick } = useHandle()
 const onMouseDownHandler = (event: MouseEvent) =>
   onMouseDown(event, handleId.value, nodeId, props.type === 'target', props.isValidConnection, undefined)
 const onClickHandler = (event: MouseEvent) => onClick(event, handleId.value ?? null, nodeId, props.type, props.isValidConnection)
+
+const getClasses = computed(() => {
+  return [
+    'vue-flow__handle',
+    `vue-flow__handle-${props.position}`,
+    `vue-flow__handle-${handleId.value}`,
+    'nodrag',
+    {
+      source: props.type !== 'target',
+      target: props.type === 'target',
+      connectable: props.connectable,
+      connecting:
+        connectionStartHandle.value?.nodeId === nodeId &&
+        connectionStartHandle.value?.handleId === handleId.value &&
+        connectionStartHandle.value?.type === props.type,
+    },
+  ]
+})
 </script>
 <script lang="ts">
 export default {
@@ -32,21 +50,7 @@ export default {
     :data-handleid="handleId"
     :data-nodeid="nodeId"
     :data-handlepos="props.position"
-    :class="[
-      'vue-flow__handle',
-      `vue-flow__handle-${props.position}`,
-      `vue-flow__handle-${handleId}`,
-      'nodrag',
-      {
-        source: props.type !== 'target',
-        target: props.type === 'target',
-        connectable: props.connectable,
-        connecting:
-          connectionStartHandle?.nodeId === nodeId &&
-          connectionStartHandle?.handleId === handleId &&
-          connectionStartHandle?.type === props.type,
-      },
-    ]"
+    :class="getClasses"
     @mousedown="onMouseDownHandler"
     @click="onClickHandler"
   >