diff --git a/packages/core/src/components/Edges/EdgeWrapper.ts b/packages/core/src/components/Edges/EdgeWrapper.ts
index 642f8c31..dbd64445 100644
--- a/packages/core/src/components/Edges/EdgeWrapper.ts
+++ b/packages/core/src/components/Edges/EdgeWrapper.ts
@@ -1,4 +1,4 @@
-import { defineComponent, h, provide, ref } from 'vue'
+import { computed, defineComponent, h, provide, ref } from 'vue'
 import { useVModel } from '@vueuse/core'
 import EdgeAnchor from './EdgeAnchor'
 import type { Connection, EdgeComponent, EdgeUpdatable, GraphEdge, HandleType, MouseTouchEvent } from '~/types'
@@ -56,8 +56,8 @@ const EdgeWrapper = defineComponent({
     provide(EdgeId, props.id)
     provide(EdgeRef, edgeEl)
 
-    const edgeClass = $computed(() => (edge.class instanceof Function ? edge.class(edge) : edge.class))
-    const edgeStyle = $computed(() => (edge.style instanceof Function ? edge.style(edge) : edge.style))
+    const edgeClass = computed(() => (edge.class instanceof Function ? edge.class(edge) : edge.class))
+    const edgeStyle = computed(() => (edge.style instanceof Function ? edge.style(edge) : edge.style))
 
     const { handlePointerDown } = useHandle({
       nodeId,
@@ -123,7 +123,7 @@ const EdgeWrapper = defineComponent({
             'vue-flow__edge',
             `vue-flow__edge-${props.type === false ? 'default' : props.name}`,
             noPanClassName.value,
-            edgeClass,
+            edgeClass.value,
             {
               updating: mouseOver.value,
               selected: edge.selected,
@@ -164,7 +164,7 @@ const EdgeWrapper = defineComponent({
                 labelBgBorderRadius: edge.labelBgBorderRadius,
                 data: edge.data,
                 events: { ...edge.events, ...hooks.on },
-                style: edgeStyle,
+                style: edgeStyle.value,
                 markerStart: `url(#${getMarkerId(edge.markerStart, vueFlowId)})`,
                 markerEnd: `url(#${getMarkerId(edge.markerEnd, vueFlowId)})`,
                 sourcePosition,
diff --git a/packages/core/src/container/EdgeRenderer/EdgeRenderer.vue b/packages/core/src/container/EdgeRenderer/EdgeRenderer.vue
index 65d76515..d99ef6f6 100644
--- a/packages/core/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/packages/core/src/container/EdgeRenderer/EdgeRenderer.vue
@@ -26,13 +26,13 @@ const {
   elevateEdgesOnSelect,
   dimensions,
   emits,
-} = $(useVueFlow())
+} = useVueFlow()
 
 const sourceNode = controlledComputed(
-  () => connectionStartHandle?.nodeId,
+  () => connectionStartHandle.value?.nodeId,
   () => {
-    if (connectionStartHandle?.nodeId) {
-      return findNode(connectionStartHandle.nodeId)
+    if (connectionStartHandle.value?.nodeId) {
+      return findNode(connectionStartHandle.value.nodeId)
     }
 
     return false
@@ -40,38 +40,38 @@ const sourceNode = controlledComputed(
 )
 
 const connectionLineVisible = controlledComputed(
-  () => connectionStartHandle?.nodeId,
+  () => connectionStartHandle.value?.nodeId,
   () =>
     !!(
       sourceNode.value &&
-      (typeof sourceNode.value.connectable === 'undefined' ? nodesConnectable : sourceNode.value.connectable) &&
-      connectionStartHandle?.nodeId &&
-      connectionStartHandle?.type
+      (typeof sourceNode.value.connectable === 'undefined' ? nodesConnectable.value : sourceNode.value.connectable) &&
+      connectionStartHandle.value?.nodeId &&
+      connectionStartHandle.value?.type
     ),
 )
 
 const groups = controlledComputed(
   [
-    () => edges.map((e) => e.zIndex),
-    () => (elevateEdgesOnSelect ? [getSelectedNodes.length] : [0]),
-    () => (elevateEdgesOnSelect ? getNodesInitialized.map((n) => n.computedPosition.z) : []),
+    () => edges.value.map((e) => e.zIndex),
+    () => (elevateEdgesOnSelect.value ? [getSelectedNodes.value.length] : [0]),
+    () => (elevateEdgesOnSelect.value ? getNodesInitialized.value.map((n) => n.computedPosition.z) : []),
   ],
-  () => groupEdgesByZLevel(getEdges, findNode, elevateEdgesOnSelect),
+  () => groupEdgesByZLevel(getEdges.value, findNode, elevateEdgesOnSelect.value),
 )
 
 function selectable(edgeSelectable?: boolean) {
-  return typeof edgeSelectable === 'undefined' ? elementsSelectable : edgeSelectable
+  return typeof edgeSelectable === 'undefined' ? elementsSelectable.value : edgeSelectable
 }
 function updatable(edgeUpdatable?: EdgeUpdatable) {
-  return typeof edgeUpdatable === 'undefined' ? edgesUpdatable : edgeUpdatable
+  return typeof edgeUpdatable === 'undefined' ? edgesUpdatable.value : edgeUpdatable
 }
 function focusable(edgeFocusable?: boolean) {
-  return typeof edgeFocusable === 'undefined' ? edgesFocusable : edgeFocusable
+  return typeof edgeFocusable === 'undefined' ? edgesFocusable.value : edgeFocusable
 }
 
 function getType(type?: string, template?: GraphEdge['template']) {
   const name = type || 'default'
-  let edgeType = template ?? getEdgeTypes[name]
+  let edgeType = template ?? getEdgeTypes.value[name]
   const instance = getCurrentInstance()
 
   if (typeof edgeType === 'string') {