diff --git a/packages/core/src/components/ConnectionLine/index.ts b/packages/core/src/components/ConnectionLine/index.ts
index 025ec5627..39c5a01c1 100644
--- a/packages/core/src/components/ConnectionLine/index.ts
+++ b/packages/core/src/components/ConnectionLine/index.ts
@@ -23,19 +23,17 @@ const ConnectionLine = defineComponent({
       connectionStartHandle,
       connectionEndHandle,
       connectionPosition,
-      connectionLineType,
-      connectionLineStyle,
       connectionLineOptions,
       connectionStatus,
       viewport,
-      findNode,
+      getNode,
     } = useVueFlow()
 
     const connectionLineComponent = inject(Slots)?.['connection-line']
 
-    const fromNode = computed(() => findNode(connectionStartHandle.value?.nodeId))
+    const fromNode = computed(() => getNode(connectionStartHandle.value!.nodeId!))
 
-    const toNode = computed(() => findNode(connectionEndHandle.value?.nodeId) ?? null)
+    const toNode = computed(() => getNode(connectionEndHandle.value!.nodeId!) ?? null)
 
     const toXY = computed(() => {
       return {
@@ -99,7 +97,7 @@ const ConnectionLine = defineComponent({
         return null
       }
 
-      const type = connectionLineType.value ?? connectionLineOptions.value.type ?? ConnectionLineType.Bezier
+      const type = connectionLineOptions.value.type ?? ConnectionLineType.Bezier
 
       let dAttr = ''
 
@@ -152,10 +150,7 @@ const ConnectionLine = defineComponent({
             : h('path', {
                 'd': dAttr,
                 'class': [connectionLineOptions.value.class, connectionStatus, 'vue-flow__connection-path'],
-                'style': {
-                  ...connectionLineStyle.value,
-                  ...connectionLineOptions.value.style,
-                },
+                'style': connectionLineOptions.value.style,
                 'marker-end': markerEnd.value,
                 'marker-start': markerStart.value,
               }),
diff --git a/packages/core/src/components/Edges/EdgeWrapper.ts b/packages/core/src/components/Edges/EdgeWrapper.ts
index d8c61e9a5..5ba644bbc 100644
--- a/packages/core/src/components/Edges/EdgeWrapper.ts
+++ b/packages/core/src/components/Edges/EdgeWrapper.ts
@@ -1,7 +1,7 @@
 import { computed, defineComponent, getCurrentInstance, h, inject, provide, ref, resolveComponent, toRef } from 'vue'
 import type { Connection, EdgeComponent, HandleType, MouseTouchEvent } from '../../types'
 import { ConnectionMode, Position } from '../../types'
-import { useEdgeHooks, useHandle, useVueFlow } from '../../composables'
+import { useHandle, useVueFlow } from '../../composables'
 import { EdgeId, EdgeRef, Slots } from '../../context'
 import {
   ARIA_EDGE_DESC_KEY,
@@ -33,8 +33,8 @@ const EdgeWrapper = defineComponent({
       noPanClassName,
       getEdgeTypes,
       removeSelectedEdges,
-      findEdge,
-      findNode,
+      getEdge,
+      getNode,
       isValidConnection,
       multiSelectionActive,
       disableKeyboardA11y,
@@ -43,9 +43,7 @@ const EdgeWrapper = defineComponent({
       edgesFocusable,
     } = useVueFlow()
 
-    const edge = computed(() => findEdge(props.id)!)
-
-    const hooks = useEdgeHooks(edge.value, emits)
+    const edge = computed(() => getEdge(props.id)!)
 
     const slots = inject(Slots)
 
@@ -74,9 +72,6 @@ const EdgeWrapper = defineComponent({
     provide(EdgeId, props.id)
     provide(EdgeRef, edgeEl)
 
-    const edgeClass = computed(() => (edge.value.class instanceof Function ? edge.value.class(edge.value) : edge.value.class))
-    const edgeStyle = computed(() => (edge.value.style instanceof Function ? edge.value.style(edge.value) : edge.value.style))
-
     const edgeCmp = computed(() => {
       const name = edge.value.type || 'default'
 
@@ -116,8 +111,8 @@ const EdgeWrapper = defineComponent({
     })
 
     return () => {
-      const sourceNode = findNode(edge.value.source)
-      const targetNode = findNode(edge.value.target)
+      const sourceNode = getNode(edge.value.source)
+      const targetNode = getNode(edge.value.target)
       const pathOptions = 'pathOptions' in edge.value ? edge.value.pathOptions : {}
 
       if (!sourceNode && !targetNode) {
@@ -183,7 +178,7 @@ const EdgeWrapper = defineComponent({
             'vue-flow__edge',
             `vue-flow__edge-${edgeCmp.value === false ? 'default' : edge.value.type || 'default'}`,
             noPanClassName.value,
-            edgeClass.value,
+            edge.value.class,
             {
               updating: mouseOver.value,
               selected: edge.value.selected,
@@ -226,8 +221,7 @@ const EdgeWrapper = defineComponent({
                 labelBgPadding: edge.value.labelBgPadding,
                 labelBgBorderRadius: edge.value.labelBgBorderRadius,
                 data: edge.value.data,
-                events: { ...edge.value.events, ...hooks.on },
-                style: edgeStyle.value,
+                style: edge.value.style,
                 markerStart: `url('#${getMarkerId(edge.value.markerStart, vueFlowId)}')`,
                 markerEnd: `url('#${getMarkerId(edge.value.markerEnd, vueFlowId)}')`,
                 sourcePosition,
@@ -296,11 +290,11 @@ const EdgeWrapper = defineComponent({
     }
 
     function onEdgeUpdate(event: MouseTouchEvent, connection: Connection) {
-      hooks.emit.update({ event, edge: edge.value, connection })
+      emits.edgeUpdate({ event, edge: edge.value, connection })
     }
 
     function onEdgeUpdateEnd(event: MouseTouchEvent) {
-      hooks.emit.updateEnd({ event, edge: edge.value })
+      emits.edgeUpdateEnd({ event, edge: edge.value })
       updating.value = false
     }
 
@@ -316,7 +310,7 @@ const EdgeWrapper = defineComponent({
 
       edgeUpdaterType.value = isSourceHandle ? 'target' : 'source'
 
-      hooks.emit.updateStart({ event, edge: edge.value })
+      emits.edgeUpdateStart({ event, edge: edge.value })
 
       handlePointerDown(event)
     }
@@ -336,27 +330,27 @@ const EdgeWrapper = defineComponent({
         }
       }
 
-      hooks.emit.click(data)
+      emits.edgeClick(data)
     }
 
     function onEdgeContextMenu(event: MouseEvent) {
-      hooks.emit.contextMenu({ event, edge: edge.value })
+      emits.edgeContextMenu({ event, edge: edge.value })
     }
 
     function onDoubleClick(event: MouseEvent) {
-      hooks.emit.doubleClick({ event, edge: edge.value })
+      emits.edgeDoubleClick({ event, edge: edge.value })
     }
 
     function onEdgeMouseEnter(event: MouseEvent) {
-      hooks.emit.mouseEnter({ event, edge: edge.value })
+      emits.edgeMouseEnter({ event, edge: edge.value })
     }
 
     function onEdgeMouseMove(event: MouseEvent) {
-      hooks.emit.mouseMove({ event, edge: edge.value })
+      emits.edgeMouseMove({ event, edge: edge.value })
     }
 
     function onEdgeMouseLeave(event: MouseEvent) {
-      hooks.emit.mouseLeave({ event, edge: edge.value })
+      emits.edgeMouseLeave({ event, edge: edge.value })
     }
 
     function onEdgeUpdaterSourceMouseDown(event: MouseEvent) {
@@ -374,9 +368,9 @@ const EdgeWrapper = defineComponent({
         if (unselect) {
           edgeEl.value?.blur()
 
-          removeSelectedEdges([findEdge(props.id)!])
+          removeSelectedEdges([getEdge(props.id)!])
         } else {
-          addSelectedEdges([findEdge(props.id)!])
+          addSelectedEdges([getEdge(props.id)!])
         }
       }
     }
diff --git a/packages/core/src/components/Nodes/DefaultNode.ts b/packages/core/src/components/Nodes/DefaultNode.ts
index 839e7a7f7..334d21dc0 100644
--- a/packages/core/src/components/Nodes/DefaultNode.ts
+++ b/packages/core/src/components/Nodes/DefaultNode.ts
@@ -1,4 +1,4 @@
-import type { Component, FunctionalComponent } from 'vue'
+import type { FunctionalComponent } from 'vue'
 import { h } from 'vue'
 import Handle from '../Handle/Handle.vue'
 import type { NodeProps } from '../../types'
@@ -7,22 +7,17 @@ import { Position } from '../../types'
 const DefaultNode: FunctionalComponent<NodeProps<{ label: any }>> = function ({
   sourcePosition = Position.Bottom,
   targetPosition = Position.Top,
-  label: _label,
   connectable = true,
-  isValidTargetPos,
-  isValidSourcePos,
   data,
 }) {
-  const label = data.label || _label
-
   return [
-    h(Handle as Component, { type: 'target', position: targetPosition, connectable, isValidConnection: isValidTargetPos }),
-    typeof label !== 'string' && label ? h(label) : h('div', { innerHTML: label }),
-    h(Handle as Component, { type: 'source', position: sourcePosition, connectable, isValidConnection: isValidSourcePos }),
+    h(Handle, { type: 'target', position: targetPosition, connectable }),
+    typeof data.label !== 'string' && data.label ? h(data.label) : h('div', { innerHTML: data.label }),
+    h(Handle, { type: 'source', position: sourcePosition, connectable }),
   ]
 }
 
-DefaultNode.props = ['sourcePosition', 'targetPosition', 'label', 'isValidTargetPos', 'isValidSourcePos', 'connectable', 'data']
+DefaultNode.props = ['sourcePosition', 'targetPosition', 'connectable', 'data']
 DefaultNode.inheritAttrs = false
 DefaultNode.compatConfig = { MODE: 3 }
 
diff --git a/packages/core/src/components/Nodes/InputNode.ts b/packages/core/src/components/Nodes/InputNode.ts
index c963faaf0..520035b9b 100644
--- a/packages/core/src/components/Nodes/InputNode.ts
+++ b/packages/core/src/components/Nodes/InputNode.ts
@@ -1,4 +1,4 @@
-import type { Component, FunctionalComponent } from 'vue'
+import type { FunctionalComponent } from 'vue'
 import { h } from 'vue'
 import Handle from '../Handle/Handle.vue'
 import type { NodeProps } from '../../types'
@@ -6,20 +6,16 @@ import { Position } from '../../types'
 
 const InputNode: FunctionalComponent<NodeProps<{ label: any }>> = function ({
   sourcePosition = Position.Bottom,
-  label: _label,
   connectable = true,
-  isValidSourcePos,
   data,
 }) {
-  const label = data.label || _label
-
   return [
-    typeof label !== 'string' && label ? h(label) : h('div', { innerHTML: label }),
-    h(Handle as Component, { type: 'source', position: sourcePosition, connectable, isValidConnection: isValidSourcePos }),
+    typeof data.label !== 'string' && data.label ? h(data.label) : h('div', { innerHTML: data.label }),
+    h(Handle, { type: 'source', position: sourcePosition, connectable }),
   ]
 }
 
-InputNode.props = ['sourcePosition', 'label', 'isValidSourcePos', 'connectable', 'data']
+InputNode.props = ['sourcePosition', 'connectable', 'data']
 InputNode.inheritAttrs = false
 InputNode.compatConfig = { MODE: 3 }
 
diff --git a/packages/core/src/components/Nodes/NodeWrapper.ts b/packages/core/src/components/Nodes/NodeWrapper.ts
index 9c443ea49..ee5435e32 100644
--- a/packages/core/src/components/Nodes/NodeWrapper.ts
+++ b/packages/core/src/components/Nodes/NodeWrapper.ts
@@ -24,7 +24,7 @@ import {
   handleNodeClick,
 } from '../../utils'
 import { NodeId, NodeRef, Slots } from '../../context'
-import { isInputDOMNode, useDrag, useNode, useNodeHooks, useUpdateNodePositions, useVueFlow } from '../../composables'
+import { isInputDOMNode, useDrag, useNode, useUpdateNodePositions, useVueFlow } from '../../composables'
 import type { NodeComponent } from '../../types'
 
 interface Props {
@@ -92,7 +92,7 @@ const NodeWrapper = defineComponent({
         return slot
       }
 
-      let nodeType = node.template || getNodeTypes.value[name]
+      let nodeType = getNodeTypes.value[name]
 
       if (typeof nodeType === 'string') {
         if (instance) {
@@ -112,8 +112,6 @@ const NodeWrapper = defineComponent({
       return false
     })
 
-    const { emit, on } = useNodeHooks(node, emits)
-
     const dragging = useDrag({
       id: props.id,
       el: nodeElement,
@@ -121,33 +119,28 @@ const NodeWrapper = defineComponent({
       selectable: isSelectable,
       dragHandle: () => node.dragHandle,
       onStart(event) {
-        emit.dragStart(event)
+        emits.nodeDragStart(event)
       },
       onDrag(event) {
-        emit.drag(event)
+        emits.nodeDrag(event)
       },
       onStop(event) {
-        emit.dragStop(event)
+        emits.nodeDragStop(event)
       },
       onClick(event) {
         onSelectNode(event)
       },
     })
 
-    const getClass = computed(() => (node.class instanceof Function ? node.class(node) : node.class))
-
     const getStyle = computed(() => {
-      const styles = (node.style instanceof Function ? node.style(node) : node.style) || {}
-
-      const width = node.width instanceof Function ? node.width(node) : node.width
-      const height = node.height instanceof Function ? node.height(node) : node.height
+      const styles = node.style || {}
 
-      if (width) {
-        styles.width = typeof width === 'string' ? width : `${width}px`
+      if (node.width) {
+        styles.width = typeof node.width === 'string' ? node.width : `${node.width}px`
       }
 
-      if (height) {
-        styles.height = typeof height === 'string' ? height : `${height}px`
+      if (node.height) {
+        styles.height = typeof node.height === 'string' ? node.height : `${node.height}px`
       }
 
       return styles
@@ -260,7 +253,7 @@ const NodeWrapper = defineComponent({
               selectable: isSelectable.value,
               parent: node.isParent,
             },
-            getClass.value,
+            node.class,
           ],
           'style': {
             visibility: isInit.value ? 'visible' : 'hidden',
@@ -282,25 +275,20 @@ const NodeWrapper = defineComponent({
           'onKeydown': onKeyDown,
         },
         [
-          h(nodeCmp.value === false ? getNodeTypes.value.default : (nodeCmp.value as any), {
+          h(nodeCmp.value === false ? getNodeTypes.value.default : nodeCmp.value, {
             id: node.id,
             type: node.type,
             data: node.data,
-            events: { ...node.events, ...on },
             selected: node.selected,
             resizing: node.resizing,
             dragging: dragging.value,
             connectable: isConnectable.value,
-            position: node.computedPosition,
             dimensions: node.dimensions,
-            isValidTargetPos: node.isValidTargetPos,
-            isValidSourcePos: node.isValidSourcePos,
             parent: node.parentNode,
             parentNodeId: node.parentNode,
             zIndex: node.computedPosition.z ?? zIndex.value,
             targetPosition: node.targetPosition,
             sourcePosition: node.sourcePosition,
-            label: node.label,
             dragHandle: node.dragHandle,
             onUpdateNodeInternals: updateInternals,
           }),
@@ -336,28 +324,28 @@ const NodeWrapper = defineComponent({
 
     function onMouseEnter(event: MouseEvent) {
       if (!dragging?.value) {
-        emit.mouseEnter({ event, node })
+        emits.nodeMouseEnter({ event, node })
       }
     }
 
     function onMouseMove(event: MouseEvent) {
       if (!dragging?.value) {
-        emit.mouseMove({ event, node })
+        emits.nodeMouseMove({ event, node })
       }
     }
 
     function onMouseLeave(event: MouseEvent) {
       if (!dragging?.value) {
-        emit.mouseLeave({ event, node })
+        emits.nodeMouseLeave({ event, node })
       }
     }
 
     function onContextMenu(event: MouseEvent) {
-      return emit.contextMenu({ event, node })
+      return emits.nodeContextMenu({ event, node })
     }
 
     function onDoubleClick(event: MouseEvent) {
-      return emit.doubleClick({ event, node })
+      return emits.nodeDoubleClick({ event, node })
     }
 
     function onSelectNode(event: MouseEvent) {
@@ -373,7 +361,7 @@ const NodeWrapper = defineComponent({
         )
       }
 
-      emit.click({ event, node })
+      emits.nodeClick({ event, node })
     }
 
     function onKeyDown(event: KeyboardEvent) {
diff --git a/packages/core/src/components/Nodes/OutputNode.ts b/packages/core/src/components/Nodes/OutputNode.ts
index 02fb7933b..3c17a8fb4 100644
--- a/packages/core/src/components/Nodes/OutputNode.ts
+++ b/packages/core/src/components/Nodes/OutputNode.ts
@@ -1,4 +1,4 @@
-import type { Component, FunctionalComponent } from 'vue'
+import type { FunctionalComponent } from 'vue'
 import { h } from 'vue'
 import Handle from '../Handle/Handle.vue'
 import type { NodeProps } from '../../types'
@@ -6,20 +6,16 @@ import { Position } from '../../types'
 
 const OutputNode: FunctionalComponent<NodeProps<{ label: any }>> = function ({
   targetPosition = Position.Top,
-  label: _label,
   connectable = true,
-  isValidTargetPos,
   data,
 }) {
-  const label = data.label || _label
-
   return [
-    h(Handle as Component, { type: 'target', position: targetPosition, connectable, isValidConnection: isValidTargetPos }),
-    typeof label !== 'string' && label ? h(label) : h('div', { innerHTML: label }),
+    h(Handle, { type: 'target', position: targetPosition, connectable }),
+    typeof data.label !== 'string' && data.label ? h(data.label) : h('div', { innerHTML: data.label }),
   ]
 }
 
-OutputNode.props = ['targetPosition', 'label', 'isValidTargetPos', 'connectable', 'data']
+OutputNode.props = ['targetPosition', 'connectable', 'data']
 OutputNode.inheritAttrs = false
 OutputNode.compatConfig = { MODE: 3 }
 
diff --git a/packages/core/src/composables/index.ts b/packages/core/src/composables/index.ts
index e7f6c2eff..9860211c8 100644
--- a/packages/core/src/composables/index.ts
+++ b/packages/core/src/composables/index.ts
@@ -1,11 +1,9 @@
 export * from './useDrag'
 export * from './useEdge'
-export * from './useEdgeHooks'
 export * from './useGetPointerPosition'
 export * from './useHandle'
 export * from './useKeyPress'
 export * from './useNode'
-export * from './useNodeHooks'
 export * from './useUpdateNodePositions'
 export * from './useViewportHelper'
 export * from './useVueFlow'
diff --git a/packages/core/src/composables/useDrag.ts b/packages/core/src/composables/useDrag.ts
index c84f8f5ef..71401b35f 100644
--- a/packages/core/src/composables/useDrag.ts
+++ b/packages/core/src/composables/useDrag.ts
@@ -49,11 +49,11 @@ export function useDrag(params: UseDragParams) {
     autoPanSpeed,
     nodesDraggable,
     panBy,
-    findNode,
+    getNode,
     multiSelectionActive,
     nodesSelectionActive,
     selectNodesOnDrag,
-    removeSelectedElements,
+    removeSelectedNodes,
     addSelectedNodes,
     updateNodePositions,
     emits,
@@ -97,7 +97,7 @@ export function useDrag(params: UseDragParams) {
         nextPosition,
         emits.error,
         nodeExtent.value,
-        n.parentNode ? findNode(n.parentNode) : undefined,
+        n.parentNode ? getNode(n.parentNode) : undefined,
       )
 
       // we want to make sure that we only fire a change event when there is a change
@@ -120,7 +120,7 @@ export function useDrag(params: UseDragParams) {
       const [currentNode, nodes] = getEventHandlerParams({
         id,
         dragItems,
-        findNode,
+        getNode,
       })
 
       onDrag({ event: dragEvent, node: currentNode, nodes })
@@ -151,11 +151,11 @@ export function useDrag(params: UseDragParams) {
   const startDrag = (event: UseDragEvent, nodeEl: Element) => {
     dragStarted = true
 
-    const node = findNode(id)
+    const node = getNode(id!)
     if (!selectNodesOnDrag.value && !multiSelectionActive.value && node) {
       if (!node.selected) {
         // we need to reset selected nodes when selectNodesOnDrag=false
-        removeSelectedElements()
+        removeSelectedNodes()
       }
     }
 
@@ -164,7 +164,7 @@ export function useDrag(params: UseDragParams) {
         node,
         multiSelectionActive.value,
         addSelectedNodes,
-        removeSelectedElements,
+        removeSelectedNodes,
         nodesSelectionActive,
         false,
         nodeEl as HTMLDivElement,
@@ -173,13 +173,13 @@ export function useDrag(params: UseDragParams) {
 
     const pointerPos = getPointerPosition(event)
     lastPos = pointerPos
-    dragItems = getDragItems(nodes.value, nodesDraggable.value, pointerPos, findNode, id)
+    dragItems = getDragItems(nodes.value, nodesDraggable.value, pointerPos, getNode, id)
 
     if (dragItems.length) {
       const [currentNode, nodes] = getEventHandlerParams({
         id,
         dragItems,
-        findNode,
+        getNode,
       })
 
       onStart({ event: event.sourceEvent, node: currentNode, nodes })
@@ -256,7 +256,7 @@ export function useDrag(params: UseDragParams) {
       const [currentNode, nodes] = getEventHandlerParams({
         id,
         dragItems,
-        findNode,
+        getNode,
       })
 
       onStop({ event: event.sourceEvent, node: currentNode, nodes })
diff --git a/packages/core/src/composables/useEdge.ts b/packages/core/src/composables/useEdge.ts
index 8a1d92871..567073347 100644
--- a/packages/core/src/composables/useEdge.ts
+++ b/packages/core/src/composables/useEdge.ts
@@ -1,5 +1,5 @@
 import { inject, ref } from 'vue'
-import type { CustomEvent, ElementData } from '../types'
+import type { ElementData } from '../types'
 import { ErrorCode, VueFlowError } from '../utils'
 import { EdgeId, EdgeRef } from '../context'
 import { useVueFlow } from './useVueFlow'
@@ -15,13 +15,13 @@ import { useVueFlow } from './useVueFlow'
  * @param id - The id of the edge to access
  * @returns the edge id, the edge and the edge dom element
  */
-export function useEdge<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(id?: string) {
+export function useEdge<Data = ElementData>(id?: string) {
   const edgeId = id ?? inject(EdgeId, '')
   const edgeEl = inject(EdgeRef, ref(null))
 
-  const { findEdge, emits } = useVueFlow()
+  const { getEdge, emits } = useVueFlow()
 
-  const edge = findEdge<Data, CustomEvents>(edgeId)!
+  const edge = getEdge<Data>(edgeId)!
 
   if (!edge) {
     emits.error(new VueFlowError(ErrorCode.EDGE_NOT_FOUND, edgeId))
diff --git a/packages/core/src/composables/useEdgeHooks.ts b/packages/core/src/composables/useEdgeHooks.ts
deleted file mode 100644
index cd6dd8144..000000000
--- a/packages/core/src/composables/useEdgeHooks.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import type { EdgeEventsEmit, EdgeEventsOn, GraphEdge, VueFlowStore } from '../types'
-import { createExtendedEventHook } from '../utils'
-
-function createEdgeHooks() {
-  return {
-    doubleClick: createExtendedEventHook(),
-    click: createExtendedEventHook(),
-    mouseEnter: createExtendedEventHook(),
-    mouseMove: createExtendedEventHook(),
-    mouseLeave: createExtendedEventHook(),
-    contextMenu: createExtendedEventHook(),
-    updateStart: createExtendedEventHook(),
-    update: createExtendedEventHook(),
-    updateEnd: createExtendedEventHook(),
-  }
-}
-
-/**
- * Composable for handling edge events
- *
- * @internal
- */
-export function useEdgeHooks(edge: GraphEdge, emits: VueFlowStore['emits']): { emit: EdgeEventsEmit; on: EdgeEventsOn } {
-  const edgeHooks = createEdgeHooks()
-
-  edgeHooks.doubleClick.on((event) => {
-    emits.edgeDoubleClick(event)
-    edge.events?.doubleClick?.(event)
-  })
-
-  edgeHooks.click.on((event) => {
-    emits.edgeClick(event)
-    edge.events?.click?.(event)
-  })
-
-  edgeHooks.mouseEnter.on((event) => {
-    emits.edgeMouseEnter(event)
-    edge.events?.mouseEnter?.(event)
-  })
-
-  edgeHooks.mouseMove.on((event) => {
-    emits.edgeMouseMove(event)
-    edge.events?.mouseMove?.(event)
-  })
-
-  edgeHooks.mouseLeave.on((event) => {
-    emits.edgeMouseLeave(event)
-    edge.events?.mouseLeave?.(event)
-  })
-
-  edgeHooks.contextMenu.on((event) => {
-    emits.edgeContextMenu(event)
-    edge.events?.contextMenu?.(event)
-  })
-
-  edgeHooks.updateStart.on((event) => {
-    emits.edgeUpdateStart(event)
-    edge.events?.updateStart?.(event)
-  })
-
-  edgeHooks.update.on((event) => {
-    emits.edgeUpdate(event)
-    edge.events?.update?.(event)
-  })
-
-  edgeHooks.updateEnd.on((event) => {
-    emits.edgeUpdateEnd(event)
-    edge.events?.updateEnd?.(event)
-  })
-
-  return Object.entries(edgeHooks).reduce(
-    (hooks, [key, value]) => {
-      hooks.emit[key as keyof EdgeEventsEmit] = value.trigger
-      hooks.on[key as keyof EdgeEventsOn] = value.on
-
-      return hooks
-    },
-    { emit: {} as EdgeEventsEmit, on: {} as EdgeEventsOn },
-  )
-}
diff --git a/packages/core/src/composables/useEdgesData.ts b/packages/core/src/composables/useEdgesData.ts
index 4ff5f3089..97bdda282 100644
--- a/packages/core/src/composables/useEdgesData.ts
+++ b/packages/core/src/composables/useEdgesData.ts
@@ -29,14 +29,14 @@ export function useEdgesData<EdgeType extends Edge = GraphEdge>(
   guard: (node: Edge) => node is EdgeType,
 ): ComputedRef<EdgeData<EdgeType>[]>
 export function useEdgesData(_edgeIds: any): any {
-  const { findEdge } = useVueFlow()
+  const { getEdge } = useVueFlow()
 
   return computed({
     get() {
       const edgeIds = toValue(_edgeIds)
 
       if (!Array.isArray(edgeIds)) {
-        const edge = findEdge(edgeIds)
+        const edge = getEdge(edgeIds)
 
         if (edge) {
           return {
@@ -52,7 +52,7 @@ export function useEdgesData(_edgeIds: any): any {
       const data: EdgeData<Edge>[] = []
 
       for (const edgeId of edgeIds) {
-        const edge = findEdge(edgeId)
+        const edge = getEdge(edgeId)
 
         if (edge) {
           data.push({
diff --git a/packages/core/src/composables/useHandle.ts b/packages/core/src/composables/useHandle.ts
index e20f1ad44..55b6f2b3c 100644
--- a/packages/core/src/composables/useHandle.ts
+++ b/packages/core/src/composables/useHandle.ts
@@ -57,7 +57,7 @@ export function useHandle({
     nodesConnectable,
     autoPanOnConnect,
     autoPanSpeed,
-    findNode,
+    getNode,
     panBy,
     startConnection,
     updateConnection,
@@ -83,13 +83,7 @@ export function useHandle({
     const doc = getHostForElement(event.target as HTMLElement)
 
     if ((isMouseTriggered && event.button === 0) || !isMouseTriggered) {
-      const node = findNode(toValue(nodeId))
-
-      let isValidConnectionHandler = toValue(isValidConnection) || isValidConnectionProp.value || alwaysValid
-
-      if (!isValidConnectionHandler && node) {
-        isValidConnectionHandler = (!isTarget ? node.isValidTargetPos : node.isValidSourcePos) || alwaysValid
-      }
+      const isValidConnectionHandler = toValue(isValidConnection) || isValidConnectionProp.value || alwaysValid
 
       let closestHandle: ConnectionHandle | null
 
@@ -163,7 +157,7 @@ export function useHandle({
               doc,
               edges.value,
               nodes.value,
-              findNode,
+              getNode,
             ),
         )
 
@@ -270,20 +264,14 @@ export function useHandle({
       return
     }
 
-    const isTarget = toValue(type) === 'target'
-
     if (!connectionClickStartHandle.value) {
       emits.clickConnectStart({ event, nodeId: toValue(nodeId), handleId: toValue(handleId) })
 
       startConnection({ nodeId: toValue(nodeId), type: toValue(type), handleId: toValue(handleId) }, undefined, true)
     } else {
-      let isValidConnectionHandler = toValue(isValidConnection) || isValidConnectionProp.value || alwaysValid
-
-      const node = findNode(toValue(nodeId))
+      const isValidConnectionHandler = toValue(isValidConnection) || isValidConnectionProp.value || alwaysValid
 
-      if (!isValidConnectionHandler && node) {
-        isValidConnectionHandler = (!isTarget ? node.isValidTargetPos : node.isValidSourcePos) || alwaysValid
-      }
+      const node = getNode(toValue(nodeId))
 
       if (node && (typeof node.connectable === 'undefined' ? nodesConnectable.value : node.connectable) === false) {
         return
@@ -306,7 +294,7 @@ export function useHandle({
         doc,
         edges.value,
         nodes.value,
-        findNode,
+        getNode,
       )
 
       const isOwnHandle = connection.source === connection.target
diff --git a/packages/core/src/composables/useNode.ts b/packages/core/src/composables/useNode.ts
index 2355a98fb..467f4cb83 100644
--- a/packages/core/src/composables/useNode.ts
+++ b/packages/core/src/composables/useNode.ts
@@ -1,5 +1,5 @@
 import { computed, inject, ref } from 'vue'
-import type { CustomEvent, ElementData } from '../types'
+import type { ElementData } from '../types'
 import { ErrorCode, VueFlowError, getConnectedEdges } from '../utils'
 import { NodeRef } from '../context'
 import { useVueFlow } from './useVueFlow'
@@ -16,13 +16,13 @@ import { useNodeId } from './useNodeId'
  * @param id - The id of the node to access
  * @returns the node id, the node, the node dom element, it's parent and connected edges
  */
-export function useNode<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(id?: string) {
+export function useNode<Data = ElementData>(id?: string) {
   const nodeId = id ?? useNodeId() ?? ''
   const nodeEl = inject(NodeRef, ref(null))
 
-  const { findNode, edges, emits } = useVueFlow()
+  const { getNode, edges, emits } = useVueFlow()
 
-  const node = findNode<Data, CustomEvents>(nodeId)!
+  const node = getNode<Data>(nodeId)!
 
   if (!node) {
     emits.error(new VueFlowError(ErrorCode.NODE_NOT_FOUND, nodeId))
@@ -32,7 +32,7 @@ export function useNode<Data = ElementData, CustomEvents extends Record<string,
     id: nodeId,
     nodeEl,
     node,
-    parentNode: computed(() => findNode(node.parentNode)),
+    parentNode: computed(() => (node.parentNode ? getNode(node.parentNode) : undefined)),
     connectedEdges: computed(() => getConnectedEdges([node], edges.value)),
   }
 }
diff --git a/packages/core/src/composables/useNodeHooks.ts b/packages/core/src/composables/useNodeHooks.ts
deleted file mode 100644
index 4ab047624..000000000
--- a/packages/core/src/composables/useNodeHooks.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import type { GraphNode, NodeEventsEmit, NodeEventsOn, VueFlowStore } from '../types'
-import { createExtendedEventHook } from '../utils'
-
-function createNodeHooks() {
-  return {
-    doubleClick: createExtendedEventHook(),
-    click: createExtendedEventHook(),
-    mouseEnter: createExtendedEventHook(),
-    mouseMove: createExtendedEventHook(),
-    mouseLeave: createExtendedEventHook(),
-    contextMenu: createExtendedEventHook(),
-    dragStart: createExtendedEventHook(),
-    drag: createExtendedEventHook(),
-    dragStop: createExtendedEventHook(),
-  }
-}
-
-/**
- * Composable for handling node events
- *
- * @internal
- */
-export function useNodeHooks(node: GraphNode, emits: VueFlowStore['emits']): { emit: NodeEventsEmit; on: NodeEventsOn } {
-  const nodeHooks = createNodeHooks()
-
-  nodeHooks.doubleClick.on((event) => {
-    emits.nodeDoubleClick(event)
-    node.events?.doubleClick?.(event)
-  })
-
-  nodeHooks.click.on((event) => {
-    emits.nodeClick(event)
-    node.events?.click?.(event)
-  })
-
-  nodeHooks.mouseEnter.on((event) => {
-    emits.nodeMouseEnter(event)
-    node.events?.mouseEnter?.(event)
-  })
-
-  nodeHooks.mouseMove.on((event) => {
-    emits.nodeMouseMove(event)
-    node.events?.mouseMove?.(event)
-  })
-
-  nodeHooks.mouseLeave.on((event) => {
-    emits.nodeMouseLeave(event)
-    node.events?.mouseLeave?.(event)
-  })
-
-  nodeHooks.contextMenu.on((event) => {
-    emits.nodeContextMenu(event)
-    node.events?.contextMenu?.(event)
-  })
-
-  nodeHooks.dragStart.on((event) => {
-    emits.nodeDragStart(event)
-    node.events?.dragStart?.(event)
-  })
-
-  nodeHooks.drag.on((event) => {
-    emits.nodeDrag(event)
-    node.events?.drag?.(event)
-  })
-
-  nodeHooks.dragStop.on((event) => {
-    emits.nodeDragStop(event)
-    node.events?.dragStop?.(event)
-  })
-
-  return Object.entries(nodeHooks).reduce(
-    (hooks, [key, value]) => {
-      hooks.emit[key as keyof NodeEventsEmit] = value.trigger
-      hooks.on[key as keyof NodeEventsOn] = value.on
-      return hooks
-    },
-    { emit: {} as NodeEventsEmit, on: {} as NodeEventsOn },
-  )
-}
diff --git a/packages/core/src/composables/useNodesData.ts b/packages/core/src/composables/useNodesData.ts
index 9c1e8ca21..48c03312b 100644
--- a/packages/core/src/composables/useNodesData.ts
+++ b/packages/core/src/composables/useNodesData.ts
@@ -29,14 +29,14 @@ export function useNodesData<NodeType extends Node = GraphNode>(
   guard: (node: Node) => node is NodeType,
 ): ComputedRef<NodeData<NodeType>[]>
 export function useNodesData(_nodeIds: any): any {
-  const { findNode } = useVueFlow()
+  const { getNode } = useVueFlow()
 
   return computed({
     get() {
       const nodeIds = toValue(_nodeIds)
 
       if (!Array.isArray(nodeIds)) {
-        const node = findNode(nodeIds)
+        const node = getNode(nodeIds)
 
         if (node) {
           return {
@@ -52,7 +52,7 @@ export function useNodesData(_nodeIds: any): any {
       const data: NodeData<Node>[] = []
 
       for (const nodeId of nodeIds) {
-        const node = findNode(nodeId)
+        const node = getNode(nodeId)
 
         if (node) {
           data.push({
diff --git a/packages/core/src/composables/useOnInitHandler.ts b/packages/core/src/composables/useOnInitHandler.ts
index 142bd2529..5f2a196f4 100644
--- a/packages/core/src/composables/useOnInitHandler.ts
+++ b/packages/core/src/composables/useOnInitHandler.ts
@@ -1,4 +1,4 @@
-import { watch } from 'vue'
+import { onMounted } from 'vue'
 import { useVueFlow } from './useVueFlow'
 
 /**
@@ -9,15 +9,9 @@ import { useVueFlow } from './useVueFlow'
 export function useOnInitHandler() {
   const vfInstance = useVueFlow()
 
-  watch(
-    () => vfInstance.viewportHelper.value.viewportInitialized,
-    (isInitialized) => {
-      if (isInitialized) {
-        setTimeout(() => {
-          vfInstance.emits.init(vfInstance)
-          vfInstance.emits.paneReady(vfInstance)
-        }, 1)
-      }
-    },
-  )
+  onMounted(() => {
+    setTimeout(() => {
+      vfInstance.emits.init(vfInstance)
+    }, 1)
+  })
 }
diff --git a/packages/core/src/composables/useUpdateNodePositions.ts b/packages/core/src/composables/useUpdateNodePositions.ts
index 23e3416f0..0ad3c42e2 100644
--- a/packages/core/src/composables/useUpdateNodePositions.ts
+++ b/packages/core/src/composables/useUpdateNodePositions.ts
@@ -8,8 +8,7 @@ import { useVueFlow } from './useVueFlow'
  * @internal
  */
 export function useUpdateNodePositions() {
-  const { getSelectedNodes, nodeExtent, updateNodePositions, findNode, snapGrid, snapToGrid, nodesDraggable, emits } =
-    useVueFlow()
+  const { getSelectedNodes, nodeExtent, updateNodePositions, getNode, snapGrid, snapToGrid, nodesDraggable, emits } = useVueFlow()
 
   return (positionDiff: XYPosition, isShiftPressed = false) => {
     // by default a node moves 5px on each key press, or 20px if shift is pressed
@@ -31,7 +30,7 @@ export function useUpdateNodePositions() {
           nextPosition,
           emits.error,
           nodeExtent.value,
-          node.parentNode ? findNode(node.parentNode) : undefined,
+          node.parentNode ? getNode(node.parentNode) : undefined,
         )
 
         nodeUpdates.push({
diff --git a/packages/core/src/composables/useViewportHelper.ts b/packages/core/src/composables/useViewportHelper.ts
index 586984172..df39c1509 100644
--- a/packages/core/src/composables/useViewportHelper.ts
+++ b/packages/core/src/composables/useViewportHelper.ts
@@ -28,9 +28,7 @@ const initialViewportHelper: ViewportHelper = {
   screenToFlowCoordinate: (position) => position,
   flowToScreenCoordinate: (position) => position,
   setViewport: noop,
-  setTransform: noop,
   getViewport: () => ({ x: 0, y: 0, zoom: 1 }),
-  getTransform: () => ({ x: 0, y: 0, zoom: 1 }),
   viewportInitialized: false,
 }
 
@@ -109,21 +107,11 @@ export function useViewportHelper(state: State) {
       setViewport: (transform, options) => {
         return transformViewport(transform.x, transform.y, transform.zoom, options?.duration)
       },
-      setTransform: (transform, options) => {
-        return transformViewport(transform.x, transform.y, transform.zoom, options?.duration)
-      },
       getViewport: () => ({
         x: state.viewport.x,
         y: state.viewport.y,
         zoom: state.viewport.zoom,
       }),
-      getTransform: () => {
-        return {
-          x: state.viewport.x,
-          y: state.viewport.y,
-          zoom: state.viewport.zoom,
-        }
-      },
       fitView: (
         options = {
           padding: DEFAULT_PADDING,
diff --git a/packages/core/src/composables/useVueFlow.ts b/packages/core/src/composables/useVueFlow.ts
index c4f7427a0..a500402ad 100644
--- a/packages/core/src/composables/useVueFlow.ts
+++ b/packages/core/src/composables/useVueFlow.ts
@@ -1,8 +1,8 @@
 import { tryOnScopeDispose } from '@vueuse/core'
 import type { EffectScope } from 'vue'
-import { effectScope, getCurrentInstance, getCurrentScope, inject, provide, watch } from 'vue'
-import type { EdgeChange, FlowOptions, NodeChange, VueFlowStore } from '../types'
-import { ErrorCode, VueFlowError, warn } from '../utils'
+import { effectScope, getCurrentScope, inject, provide, watch } from 'vue'
+import type { EdgeChange, NodeChange, VueFlowStore } from '../types'
+import { warn } from '../utils'
 import { VueFlow } from '../context'
 import { Storage } from '../utils/storage'
 
@@ -19,20 +19,13 @@ type Scope = (EffectScope & { vueFlowId: string }) | undefined
  *
  * @public
  * @returns a vue flow store instance
- * @param idOrOpts - id of the store instance or options to create a new store instance
+ * @param id - id of the store instance or options to create a new store instance
  */
-export function useVueFlow(id?: string): VueFlowStore
-export function useVueFlow(options?: FlowOptions): VueFlowStore
-export function useVueFlow(idOrOpts?: any): VueFlowStore {
+export function useVueFlow(id?: string): VueFlowStore {
   const storage = Storage.getInstance()
 
   const scope = getCurrentScope() as Scope
 
-  const isOptsObj = typeof idOrOpts === 'object'
-
-  const options = isOptsObj ? idOrOpts : { id: idOrOpts }
-
-  const id = options.id
   const vueFlowId = scope?.vueFlowId || id
 
   let vueFlow: Injection
@@ -66,7 +59,7 @@ export function useVueFlow(idOrOpts?: any): VueFlowStore {
   if (!vueFlow || (vueFlow && id && id !== vueFlow.id)) {
     const name = id ?? storage.getId()
 
-    const state = storage.create(name, options)
+    const state = storage.create(name)
 
     vueFlow = state
 
@@ -118,11 +111,6 @@ export function useVueFlow(idOrOpts?: any): VueFlowStore {
         }
       })
     })
-  } else {
-    // If options were passed, overwrite state with the options' values
-    if (isOptsObj) {
-      vueFlow.setState(options)
-    }
   }
 
   // Provide a fresh instance into context if we are in a scope
@@ -132,14 +120,5 @@ export function useVueFlow(idOrOpts?: any): VueFlowStore {
     scope.vueFlowId = vueFlow.id
   }
 
-  if (isOptsObj) {
-    const instance = getCurrentInstance()
-
-    // ignore the warning if we are in a VueFlow component
-    if (instance?.type.name !== 'VueFlow') {
-      vueFlow.emits.error(new VueFlowError(ErrorCode.USEVUEFLOW_OPTIONS))
-    }
-  }
-
   return vueFlow
 }
diff --git a/packages/core/src/composables/useWatchProps.ts b/packages/core/src/composables/useWatchProps.ts
index 4dd9da6a6..42cb8e01f 100644
--- a/packages/core/src/composables/useWatchProps.ts
+++ b/packages/core/src/composables/useWatchProps.ts
@@ -2,7 +2,7 @@ import type { ToRefs } from 'vue'
 import { effectScope, isRef, nextTick, onScopeDispose, toRef, watch } from 'vue'
 import type { WatchPausableReturn } from '@vueuse/core'
 import { watchPausable } from '@vueuse/core'
-import type { Connection, FlowProps, VueFlowStore } from '../types'
+import type { FlowProps, VueFlowStore } from '../types'
 import { isDef } from '../utils'
 
 /**
@@ -13,60 +13,10 @@ import { isDef } from '../utils'
  * @param props
  * @param store
  */
-export function useWatchProps(
-  models: ToRefs<Pick<FlowProps, 'nodes' | 'edges' | 'modelValue'>>,
-  props: FlowProps,
-  store: VueFlowStore,
-) {
+export function useWatchProps(models: ToRefs<Pick<FlowProps, 'nodes' | 'edges'>>, props: FlowProps, store: VueFlowStore) {
   const scope = effectScope(true)
 
   scope.run(() => {
-    const watchModelValue = () => {
-      scope.run(() => {
-        let pauseModel: WatchPausableReturn
-        let pauseStore: WatchPausableReturn
-
-        let immediateStore = !!(store.nodes.value.length || store.edges.value.length)
-
-        // eslint-disable-next-line prefer-const
-        pauseModel = watchPausable([models.modelValue, () => models.modelValue?.value?.length], ([elements]) => {
-          if (elements && Array.isArray(elements)) {
-            pauseStore?.pause()
-
-            store.setElements(elements)
-
-            // only trigger store watcher immediately if we actually set any elements to the store
-            if (!pauseStore && !immediateStore && elements.length) {
-              immediateStore = true
-            } else {
-              pauseStore?.resume()
-            }
-          }
-        })
-
-        pauseStore = watchPausable(
-          [store.nodes, store.edges, () => store.edges.value.length, () => store.nodes.value.length],
-          ([nodes, edges]) => {
-            if (models.modelValue?.value && Array.isArray(models.modelValue.value)) {
-              pauseModel?.pause()
-
-              models.modelValue.value = [...nodes, ...edges]
-
-              nextTick(() => {
-                pauseModel?.resume()
-              })
-            }
-          },
-          { immediate: immediateStore },
-        )
-
-        onScopeDispose(() => {
-          pauseModel?.stop()
-          pauseStore?.stop()
-        })
-      })
-    }
-
     const watchNodesValue = () => {
       scope.run(() => {
         let pauseModel: WatchPausableReturn
@@ -221,77 +171,8 @@ export function useWatchProps(
       })
     }
 
-    const watchApplyDefault = () => {
-      scope.run(() => {
-        watch(
-          () => props.applyDefault,
-          () => {
-            if (isDef(props.applyDefault)) {
-              store.applyDefault.value = props.applyDefault
-            }
-          },
-          {
-            immediate: true,
-          },
-        )
-      })
-    }
-
-    const watchAutoConnect = () => {
-      scope.run(() => {
-        const autoConnector = async (params: Connection) => {
-          let connection: boolean | Connection = params
-
-          if (typeof props.autoConnect === 'function') {
-            connection = await props.autoConnect(params)
-          }
-
-          if (connection !== false) {
-            store.addEdges([connection])
-          }
-        }
-
-        watch(
-          () => props.autoConnect,
-          () => {
-            if (isDef(props.autoConnect)) {
-              store.autoConnect.value = props.autoConnect
-            }
-          },
-          { immediate: true },
-        )
-
-        watch(
-          store.autoConnect,
-          (autoConnectEnabled, _, onCleanup) => {
-            if (autoConnectEnabled) {
-              store.onConnect(autoConnector)
-            } else {
-              store.hooks.value.connect.off(autoConnector)
-            }
-
-            onCleanup(() => {
-              store.hooks.value.connect.off(autoConnector)
-            })
-          },
-          { immediate: true },
-        )
-      })
-    }
-
     const watchRest = () => {
-      const skip: (keyof typeof props)[] = [
-        'id',
-        'modelValue',
-        'translateExtent',
-        'nodeExtent',
-        'edges',
-        'nodes',
-        'maxZoom',
-        'minZoom',
-        'applyDefault',
-        'autoConnect',
-      ]
+      const skip: (keyof typeof props)[] = ['id', 'translateExtent', 'nodeExtent', 'edges', 'nodes', 'maxZoom', 'minZoom']
 
       for (const key of Object.keys(props)) {
         const propKey = key as keyof typeof props
@@ -318,15 +199,12 @@ export function useWatchProps(
     }
 
     const runAll = () => {
-      watchModelValue()
       watchNodesValue()
       watchEdgesValue()
       watchMinZoom()
       watchMaxZoom()
       watchTranslateExtent()
       watchNodeExtent()
-      watchApplyDefault()
-      watchAutoConnect()
       watchRest()
     }
 
diff --git a/packages/core/src/container/EdgeRenderer/EdgeRenderer.vue b/packages/core/src/container/EdgeRenderer/EdgeRenderer.vue
index ff7e23b45..cab4a38e0 100644
--- a/packages/core/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/packages/core/src/container/EdgeRenderer/EdgeRenderer.vue
@@ -5,7 +5,7 @@ import { useVueFlow } from '../../composables'
 import { getEdgeZIndex } from '../../utils'
 import MarkerDefinitions from './MarkerDefinitions.vue'
 
-const { findNode, getEdges, elevateEdgesOnSelect } = useVueFlow()
+const { getNode, getEdges, elevateEdgesOnSelect } = useVueFlow()
 </script>
 
 <script lang="ts">
@@ -22,7 +22,7 @@ export default {
     v-for="edge of getEdges"
     :key="edge.id"
     class="vue-flow__edges vue-flow__container"
-    :style="{ zIndex: getEdgeZIndex(edge, findNode, elevateEdgesOnSelect) }"
+    :style="{ zIndex: getEdgeZIndex(edge, getNode, elevateEdgesOnSelect) }"
   >
     <EdgeWrapper :id="edge.id" />
   </svg>
diff --git a/packages/core/src/container/Pane/Pane.vue b/packages/core/src/container/Pane/Pane.vue
index 4661d97af..1f65462f8 100644
--- a/packages/core/src/container/Pane/Pane.vue
+++ b/packages/core/src/container/Pane/Pane.vue
@@ -16,7 +16,6 @@ const {
   viewport,
   emits,
   userSelectionActive,
-  removeSelectedElements,
   panOnDrag,
   userSelectionRect,
   elementsSelectable,
@@ -31,6 +30,8 @@ const {
   multiSelectionActive,
   edgeLookup,
   nodeLookup,
+  removeSelectedEdges,
+  removeSelectedNodes,
 } = useVueFlow()
 
 const container = ref<HTMLDivElement | null>(null)
@@ -95,7 +96,8 @@ function onClick(event: MouseEvent) {
 
   emits.paneClick(event)
 
-  removeSelectedElements()
+  removeSelectedEdges()
+  removeSelectedNodes()
 
   nodesSelectionActive.value = false
 }
@@ -138,7 +140,8 @@ function onPointerDown(event: PointerEvent) {
     edgeIdLookup.value.set(edge.target, edgeIdLookup.value.get(edge.target)?.add(id) || new Set([id]))
   }
 
-  removeSelectedElements()
+  removeSelectedEdges()
+  removeSelectedNodes()
 
   userSelectionRect.value = {
     width: 0,
diff --git a/packages/core/src/container/VueFlow/VueFlow.vue b/packages/core/src/container/VueFlow/VueFlow.vue
index f71a823b3..0db55d704 100644
--- a/packages/core/src/container/VueFlow/VueFlow.vue
+++ b/packages/core/src/container/VueFlow/VueFlow.vue
@@ -27,12 +27,9 @@ const props = withDefaults(defineProps<FlowProps>(), {
   zoomOnDoubleClick: undefined,
   panOnScroll: undefined,
   panOnDrag: undefined,
-  applyDefault: undefined,
   fitViewOnInit: undefined,
   connectOnClick: undefined,
-  connectionLineStyle: undefined,
   connectionLineOptions: undefined,
-  autoConnect: undefined,
   elevateEdgesOnSelect: undefined,
   elevateNodesOnSelect: undefined,
   disableKeyboardA11y: undefined,
@@ -52,14 +49,13 @@ const emit = defineEmits<FlowEmits>()
 
 const slots = defineSlots<FlowSlots>()
 
-const modelValue = useVModel(props, 'modelValue', emit)
 const modelNodes = useVModel(props, 'nodes', emit)
 const modelEdges = useVModel(props, 'edges', emit)
 
-const instance = useVueFlow(props)
+const instance = useVueFlow()
 
 // watch props and update store state
-const dispose = useWatchProps({ modelValue, nodes: modelNodes, edges: modelEdges }, props, instance)
+const dispose = useWatchProps({ nodes: modelNodes, edges: modelEdges }, props, instance)
 
 useHooks(emit, instance.hooks)
 
diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts
index 89564847d..726aeff0a 100644
--- a/packages/core/src/store/actions.ts
+++ b/packages/core/src/store/actions.ts
@@ -4,12 +4,10 @@ import { until } from '@vueuse/core'
 import type {
   Actions,
   CoordinateExtent,
-  Edge,
   EdgeAddChange,
   EdgeLookup,
   EdgeRemoveChange,
   EdgeSelectionChange,
-  Elements,
   FlowExportObject,
   GraphEdge,
   GraphNode,
@@ -19,7 +17,6 @@ import type {
   NodeLookup,
   NodePositionChange,
   NodeRemoveChange,
-  NodeSelectionChange,
   Rect,
   State,
 } from '../types'
@@ -41,13 +38,10 @@ import {
   getOverlappingArea,
   getSelectionChanges,
   isDef,
-  isEdge,
   isGraphNode,
-  isNode,
   isRect,
   nodeToRect,
   updateConnectionLookup,
-  updateEdgeAction,
 } from '../utils'
 import { storeOptionsToSkip, useState } from './state'
 
@@ -72,7 +66,7 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
     return getConnectedEdgesBase(nodesOrId, state.edges)
   }
 
-  const findNode: Actions['findNode'] = (id) => {
+  const getNode: Actions['getNode'] = (id) => {
     if (!id) {
       return
     }
@@ -80,7 +74,7 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
     return nodeLookup.value.get(id)
   }
 
-  const findEdge: Actions['findEdge'] = (id) => {
+  const getEdge: Actions['getEdge'] = (id) => {
     if (!id) {
       return
     }
@@ -103,7 +97,7 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
         change.position = node.position
 
         if (node.parentNode) {
-          const parentNode = findNode(node.parentNode)
+          const parentNode = getNode(node.parentNode)
 
           change.position = {
             x: change.position.x - (parentNode?.computedPosition?.x ?? 0),
@@ -139,7 +133,7 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
     for (let i = 0; i < updates.length; ++i) {
       const update = updates[i]
 
-      const node = findNode(update.id)
+      const node = getNode(update.id)
 
       if (node) {
         const dimensions = getDimensions(update.nodeElement)
@@ -176,40 +170,6 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
     }
   }
 
-  const elementSelectionHandler = (elements: Elements, selected: boolean) => {
-    const nodeIds = new Set<string>()
-    const edgeIds = new Set<string>()
-
-    for (const element of elements) {
-      if (isNode(element)) {
-        nodeIds.add(element.id)
-      } else if (isEdge(element)) {
-        edgeIds.add(element.id)
-      }
-    }
-
-    const changedNodes = getSelectionChanges(nodeLookup.value, nodeIds, true)
-    const changedEdges = getSelectionChanges(edgeLookup.value, edgeIds)
-
-    if (state.multiSelectionActive) {
-      for (const nodeId of nodeIds) {
-        changedNodes.push(createSelectionChange(nodeId, selected))
-      }
-
-      for (const edgeId of edgeIds) {
-        changedEdges.push(createSelectionChange(edgeId, selected))
-      }
-    }
-
-    if (changedNodes.length) {
-      state.hooks.nodesChange.trigger(changedNodes)
-    }
-
-    if (changedEdges.length) {
-      state.hooks.edgesChange.trigger(changedEdges)
-    }
-  }
-
   const addSelectedNodes: Actions['addSelectedNodes'] = (nodes) => {
     if (state.multiSelectionActive) {
       const nodeChanges = nodes.map((node) => createSelectionChange(node.id, true))
@@ -232,10 +192,6 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
     state.hooks.nodesChange.trigger(getSelectionChanges(nodeLookup.value, new Set(), true))
   }
 
-  const addSelectedElements: Actions['addSelectedElements'] = (elements) => {
-    elementSelectionHandler(elements, true)
-  }
-
   const removeSelectedNodes: Actions['removeSelectedNodes'] = (nodes) => {
     const nodesToUnselect = nodes || state.nodes
 
@@ -258,35 +214,6 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
     state.hooks.edgesChange.trigger(edgeChanges)
   }
 
-  const removeSelectedElements: Actions['removeSelectedElements'] = (elements) => {
-    if (!elements || !elements.length) {
-      return elementSelectionHandler([], false)
-    }
-
-    const changes = elements.reduce(
-      (changes, curr) => {
-        const selectionChange = createSelectionChange(curr.id, false)
-
-        if (isNode(curr)) {
-          changes.nodes.push(selectionChange)
-        } else {
-          changes.edges.push(selectionChange)
-        }
-
-        return changes
-      },
-      { nodes: [] as NodeSelectionChange[], edges: [] as EdgeSelectionChange[] },
-    )
-
-    if (changes.nodes.length) {
-      state.hooks.nodesChange.trigger(changes.nodes)
-    }
-
-    if (changes.edges.length) {
-      state.hooks.edgesChange.trigger(changes.edges)
-    }
-  }
-
   const setMinZoom: Actions['setMinZoom'] = (minZoom) => {
     state.d3Zoom?.scaleExtent([minZoom, state.maxZoom])
     state.minZoom = minZoom
@@ -324,7 +251,7 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
       return
     }
 
-    state.nodes = createGraphNodes(nextNodes, findNode, state.hooks.error.trigger)
+    state.nodes = createGraphNodes(nextNodes, getNode, state.hooks.error.trigger)
   }
 
   const setEdges: Actions['setEdges'] = (edges) => {
@@ -337,8 +264,8 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
     const validEdges: GraphEdge[] = createGraphEdges(
       nextEdges,
       state.isValidConnection,
-      findNode,
-      findEdge,
+      getNode,
+      getEdge,
       state.hooks.error.trigger,
       state.defaultEdgeOptions,
       state.nodes,
@@ -350,22 +277,8 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
     state.edges = validEdges
   }
 
-  const setElements: Actions['setElements'] = (elements) => {
-    const nextElements = elements instanceof Function ? elements([...state.nodes, ...state.edges]) : elements
-
-    if (!state.initialized && !nextElements.length) {
-      return
-    }
-
-    setNodes(nextElements.filter(isNode))
-    setEdges(nextElements.filter(isEdge))
-  }
-
   const addNodes: Actions['addNodes'] = (nodes) => {
-    let nextNodes = nodes instanceof Function ? nodes(state.nodes) : nodes
-    nextNodes = Array.isArray(nextNodes) ? nextNodes : [nextNodes]
-
-    const graphNodes = createGraphNodes(nextNodes, findNode, state.hooks.error.trigger)
+    const graphNodes = createGraphNodes(Array.isArray(nodes) ? nodes : [nodes], getNode, state.hooks.error.trigger)
 
     const changes: NodeAddChange<any>[] = []
     for (const node of graphNodes) {
@@ -377,15 +290,12 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
     }
   }
 
-  const addEdges: Actions['addEdges'] = (params) => {
-    let nextEdges = params instanceof Function ? params(state.edges) : params
-    nextEdges = Array.isArray(nextEdges) ? nextEdges : [nextEdges]
-
+  const addEdges: Actions['addEdges'] = (edges) => {
     const validEdges = createGraphEdges(
-      nextEdges,
+      Array.isArray(edges) ? edges : [edges],
       state.isValidConnection,
-      findNode,
-      findEdge,
+      getNode,
+      getEdge,
       state.hooks.error.trigger,
       state.defaultEdgeOptions,
       state.nodes,
@@ -402,7 +312,10 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
     }
   }
 
-  const removeNodes: Actions['removeNodes'] = (nodes, removeConnectedEdges = true, removeChildren = false) => {
+  const removeNodes: Actions['removeNodes'] = (
+    nodes,
+    { removeConnectedEdges, removeChildren } = { removeConnectedEdges: true, removeChildren: false },
+  ) => {
     const nextNodes = nodes instanceof Function ? nodes(state.nodes) : nodes
     const nodesToRemove = Array.isArray(nextNodes) ? nextNodes : [nextNodes]
 
@@ -443,7 +356,7 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
     }
 
     for (const item of nodesToRemove) {
-      const currNode = typeof item === 'string' ? findNode(item) : item
+      const currNode = typeof item === 'string' ? getNode(item) : item
 
       if (!currNode) {
         continue
@@ -480,7 +393,7 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
     const changes: EdgeRemoveChange[] = []
 
     for (const item of edgesToRemove) {
-      const currEdge = typeof item === 'string' ? findEdge(item) : item
+      const currEdge = typeof item === 'string' ? getEdge(item) : item
 
       if (!currEdge) {
         continue
@@ -504,12 +417,24 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
     state.hooks.edgesChange.trigger(changes)
   }
 
-  const updateEdge: Actions['updateEdge'] = (oldEdge, newConnection, shouldReplaceId = true) => {
-    return updateEdgeAction(oldEdge, newConnection, state.edges, findEdge, shouldReplaceId, state.hooks.error.trigger)
+  const updateEdge: Actions['updateEdge'] = (id, edgeUpdate, options = { replace: false }) => {
+    const edge = getEdge(id)
+
+    if (!edge) {
+      return
+    }
+
+    const nextEdge = typeof edgeUpdate === 'function' ? edgeUpdate(edge) : edgeUpdate
+
+    if (options.replace) {
+      state.edges.splice(state.edges.indexOf(edge), 1, nextEdge as GraphEdge)
+    } else {
+      Object.assign(edge, nextEdge)
+    }
   }
 
   const updateEdgeData: Actions['updateEdgeData'] = (id, dataUpdate, options = { replace: false }) => {
-    const edge = findEdge(id)
+    const edge = getEdge(id)
 
     if (!edge) {
       return
@@ -534,7 +459,7 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
 
   // todo: maybe we should use a more immutable approach, this is a bit too much mutation and hard to maintain
   const updateNode: Actions['updateNode'] = (id, nodeUpdate, options = { replace: false }) => {
-    const node = findNode(id)
+    const node = getNode(id)
 
     if (!node) {
       return
@@ -550,7 +475,7 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
   }
 
   const updateNodeData: Actions['updateNodeData'] = (id, dataUpdate, options = { replace: false }) => {
-    const node = findNode(id)
+    const node = getNode(id)
 
     if (!node) {
       return
@@ -600,7 +525,7 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
     nodeOrRect: (Partial<Node> & { id: Node['id'] }) | Rect,
   ): [Rect | null, Node | null | undefined, boolean] => {
     const isRectObj = isRect(nodeOrRect)
-    const node = isRectObj ? null : isGraphNode(nodeOrRect as GraphNode) ? (nodeOrRect as GraphNode) : findNode(nodeOrRect.id)
+    const node = isRectObj ? null : isGraphNode(nodeOrRect as GraphNode) ? (nodeOrRect as GraphNode) : getNode(nodeOrRect.id)
 
     if (!isRectObj && !node) {
       return [null, null, isRectObj]
@@ -678,38 +603,19 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
   const setState: Actions['setState'] = (options) => {
     const opts = options instanceof Function ? options(state) : options
 
-    // these options cannot be set after initialization
-    const exclude: (keyof typeof opts)[] = [
-      'd3Zoom',
-      'd3Selection',
-      'd3ZoomHandler',
-      'viewportRef',
-      'vueFlowRef',
-      'dimensions',
-      'hooks',
-    ]
-
     // we need to set the default opts before setting any elements so the options are applied to the elements on first render
     if (isDef(opts.defaultEdgeOptions)) {
       state.defaultEdgeOptions = opts.defaultEdgeOptions
     }
 
-    const elements = opts.modelValue || opts.nodes || opts.edges ? ([] as Elements) : undefined
-
-    if (elements) {
-      if (opts.modelValue) {
-        elements.push(...opts.modelValue)
-      }
-
+    if (opts.nodes || opts.edges) {
       if (opts.nodes) {
-        elements.push(...opts.nodes)
+        setNodes(opts.nodes)
       }
 
       if (opts.edges) {
-        elements.push(...opts.edges)
+        setEdges(opts.edges)
       }
-
-      setElements(elements)
     }
 
     const setSkippedOptions = () => {
@@ -728,7 +634,7 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
       const key = o as keyof State
       const option = opts[key]
 
-      if (![...storeOptionsToSkip, ...exclude].includes(key) && isDef(option)) {
+      if (!storeOptionsToSkip.includes(key) && isDef(option)) {
         ;(<any>state)[key] = option
       }
     }
@@ -744,7 +650,6 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
 
   const toObject: Actions['toObject'] = () => {
     const nodes: Node[] = []
-    const edges: Edge[] = []
 
     for (const node of state.nodes) {
       const {
@@ -755,24 +660,17 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
         isParent: _____,
         resizing: ______,
         dragging: _______,
-        events: _________,
         ...rest
       } = node
 
       nodes.push(rest)
     }
 
-    for (const edge of state.edges) {
-      const { selected: _, sourceNode: __, targetNode: ___, events: ____, ...rest } = edge
-
-      edges.push(rest)
-    }
-
     // we have to stringify/parse so objects containing refs (like nodes and edges) can potentially be saved in a storage
     return JSON.parse(
       JSON.stringify({
         nodes,
-        edges,
+        edges: state.edges,
         position: [state.viewport.x, state.viewport.y],
         zoom: state.viewport.zoom,
         viewport: state.viewport,
@@ -782,7 +680,7 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
 
   const fromObject: Actions['fromObject'] = (obj) => {
     return new Promise((resolve) => {
-      const { nodes, edges, position, zoom, viewport } = obj
+      const { nodes, edges, viewport } = obj
 
       if (nodes) {
         setNodes(nodes)
@@ -792,10 +690,10 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
         setEdges(edges)
       }
 
-      if ((viewport?.x && viewport?.y) || position) {
-        const x = viewport?.x || position[0]
-        const y = viewport?.y || position[1]
-        const nextZoom = viewport?.zoom || zoom || state.viewport.zoom
+      if (viewport?.x && viewport?.y) {
+        const x = viewport?.x
+        const y = viewport?.y
+        const nextZoom = viewport?.zoom || state.viewport.zoom
 
         return until(() => viewportHelper.value.viewportInitialized)
           .toBe(true)
@@ -845,22 +743,20 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
   return {
     updateNodePositions,
     updateNodeDimensions,
-    setElements,
     setNodes,
     setEdges,
     addNodes,
     addEdges,
     removeNodes,
     removeEdges,
-    findNode,
-    findEdge,
+    getNode,
+    getEdge,
     updateEdge,
     updateEdgeData,
     updateNode,
     updateNodeData,
     applyEdgeChanges,
     applyNodeChanges,
-    addSelectedElements,
     addSelectedNodes,
     addSelectedEdges,
     setMinZoom,
@@ -868,7 +764,6 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
     setTranslateExtent,
     setNodeExtent,
     setPaneClickDistance,
-    removeSelectedElements,
     removeSelectedNodes,
     removeSelectedEdges,
     startConnection,
@@ -887,9 +782,7 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
     zoomOut: (transitionOpts) => viewportHelper.value.zoomOut(transitionOpts),
     zoomTo: (zoomLevel, transitionOpts) => viewportHelper.value.zoomTo(zoomLevel, transitionOpts),
     setViewport: (params, transitionOpts) => viewportHelper.value.setViewport(params, transitionOpts),
-    setTransform: (params, transitionOpts) => viewportHelper.value.setTransform(params, transitionOpts),
     getViewport: () => viewportHelper.value.getViewport(),
-    getTransform: () => viewportHelper.value.getTransform(),
     setCenter: (x, y, opts) => viewportHelper.value.setCenter(x, y, opts),
     fitBounds: (params, opts) => viewportHelper.value.fitBounds(params, opts),
     project: (params) => viewportHelper.value.project(params),
@@ -898,7 +791,6 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
     toObject,
     fromObject,
     updateNodeInternals,
-    viewportHelper,
     $reset,
     $destroy: () => {},
   }
diff --git a/packages/core/src/store/getters.ts b/packages/core/src/store/getters.ts
index 4c5341058..6e32e05f3 100644
--- a/packages/core/src/store/getters.ts
+++ b/packages/core/src/store/getters.ts
@@ -1,24 +1,10 @@
 import type { ComputedRef } from 'vue'
 import { computed } from 'vue'
-import type { ComputedGetters, EdgeLookup, GraphEdge, GraphNode, NodeLookup, State } from '../types'
+import type { ComputedGetters, GraphEdge, GraphNode, NodeLookup, State } from '../types'
 import { getNodesInside, isEdgeVisible } from '../utils'
 import { defaultEdgeTypes, defaultNodeTypes } from '../utils/defaultNodesEdges'
 
-export function useGetters(
-  state: State,
-  nodeLookup: ComputedRef<NodeLookup>,
-  edgeLookup: ComputedRef<EdgeLookup>,
-): ComputedGetters {
-  /**
-   * @deprecated will be removed in next major version; use findNode instead
-   */
-  const getNode: ComputedGetters['getNode'] = computed(() => (id) => nodeLookup.value.get(id))
-
-  /**
-   * @deprecated will be removed in next major version; use findEdge instead
-   */
-  const getEdge: ComputedGetters['getEdge'] = computed(() => (id) => edgeLookup.value.get(id))
-
+export function useGetters(state: State, nodeLookup: ComputedRef<NodeLookup>): ComputedGetters {
   const getEdgeTypes: ComputedGetters['getEdgeTypes'] = computed(() => {
     const edgeTypes: Record<string, any> = {
       ...defaultEdgeTypes,
@@ -98,8 +84,6 @@ export function useGetters(
     return state.edges
   })
 
-  const getElements: ComputedGetters['getElements'] = computed(() => [...getNodes.value, ...getEdges.value])
-
   const getSelectedNodes: ComputedGetters['getSelectedNodes'] = computed(() => {
     const selectedNodes: GraphNode[] = []
     for (const node of state.nodes) {
@@ -122,45 +106,12 @@ export function useGetters(
     return selectedEdges
   })
 
-  const getSelectedElements: ComputedGetters['getSelectedElements'] = computed(() => [
-    ...getSelectedNodes.value,
-    ...getSelectedEdges.value,
-  ])
-
-  /**
-   * @deprecated will be removed in next major version; use `useNodesInitialized` instead
-   */
-  const getNodesInitialized: ComputedGetters['getNodesInitialized'] = computed(() => {
-    const initializedNodes: GraphNode[] = []
-
-    for (const node of state.nodes) {
-      if (!!node.dimensions.width && !!node.dimensions.height && node.handleBounds !== undefined) {
-        initializedNodes.push(node)
-      }
-    }
-
-    return initializedNodes
-  })
-
-  /**
-   * @deprecated will be removed in next major version; use `useNodesInitialized` instead
-   */
-  const areNodesInitialized: ComputedGetters['areNodesInitialized'] = computed(
-    () => getNodes.value.length > 0 && getNodesInitialized.value.length === getNodes.value.length,
-  )
-
   return {
-    getNode,
-    getEdge,
-    getElements,
     getEdgeTypes,
     getNodeTypes,
     getEdges,
     getNodes,
-    getSelectedElements,
     getSelectedNodes,
     getSelectedEdges,
-    getNodesInitialized,
-    areNodesInitialized,
   }
 }
diff --git a/packages/core/src/store/hooks.ts b/packages/core/src/store/hooks.ts
index 60ee5dbf3..bfa2fcbfc 100644
--- a/packages/core/src/store/hooks.ts
+++ b/packages/core/src/store/hooks.ts
@@ -29,7 +29,6 @@ export function createHooks(): FlowHooks {
     connectEnd: createExtendedEventHook(),
     clickConnectStart: createExtendedEventHook(),
     clickConnectEnd: createExtendedEventHook(),
-    paneReady: createExtendedEventHook(),
     init: createExtendedEventHook(),
     move: createExtendedEventHook(),
     moveStart: createExtendedEventHook(),
diff --git a/packages/core/src/store/state.ts b/packages/core/src/store/state.ts
index 2198b9465..b3f16dd53 100644
--- a/packages/core/src/store/state.ts
+++ b/packages/core/src/store/state.ts
@@ -1,4 +1,4 @@
-import type { FlowOptions, State } from '../types'
+import type { FlowProps, State } from '../types'
 import { ConnectionLineType, ConnectionMode, PanOnScrollMode, SelectionMode } from '../types'
 
 import { isMacOs } from '../utils'
@@ -59,8 +59,6 @@ export function useState(): State {
     userSelectionRect: null,
 
     defaultMarkerColor: '#b1b1b7',
-    connectionLineStyle: {},
-    connectionLineType: null,
     connectionLineOptions: {
       type: ConnectionLineType.Bezier,
       style: {},
@@ -118,12 +116,11 @@ export function useState(): State {
 }
 
 // these options will be set using the appropriate methods
-export const storeOptionsToSkip: (keyof Partial<FlowOptions & Omit<State, 'nodes' | 'edges' | 'modelValue'>>)[] = [
+export const storeOptionsToSkip: (keyof Partial<FlowProps & Omit<State, 'nodes' | 'edges' | 'modelValue'>>)[] = [
   'id',
   'vueFlowRef',
   'viewportRef',
   'initialized',
-  'modelValue',
   'nodes',
   'edges',
   'maxZoom',
@@ -131,4 +128,8 @@ export const storeOptionsToSkip: (keyof Partial<FlowOptions & Omit<State, 'nodes
   'translateExtent',
   'hooks',
   'defaultEdgeOptions',
+  'd3Zoom',
+  'd3Selection',
+  'd3ZoomHandler',
+  'dimensions',
 ]
diff --git a/packages/core/src/types/edge.ts b/packages/core/src/types/edge.ts
index a08ca9372..0da12b43a 100644
--- a/packages/core/src/types/edge.ts
+++ b/packages/core/src/types/edge.ts
@@ -1,8 +1,7 @@
 import type { CSSProperties, Component, VNode } from 'vue'
-import type { ClassFunc, ElementData, Position, StyleFunc, Styles } from './flow'
+import type { ElementData, Position, Styles } from './flow'
 import type { GraphNode } from './node'
 import type { EdgeComponent, EdgeTextProps } from './components'
-import type { CustomEvent, EdgeEventsHandler, EdgeEventsOn } from './hooks'
 
 /** Edge markers */
 export enum MarkerType {
@@ -58,11 +57,7 @@ export interface EdgeLabelOptions {
   labelBgBorderRadius?: number
 }
 
-export interface DefaultEdge<
-  Data = ElementData,
-  CustomEvents extends Record<string, CustomEvent> = any,
-  Type extends string = string,
-> extends EdgeLabelOptions {
+export interface DefaultEdge<Data = ElementData, Type extends string = string> extends EdgeLabelOptions {
   /** Unique edge id */
   id: string
   /** An edge label */
@@ -92,9 +87,9 @@ export interface DefaultEdge<
   /** Disable/enable deleting edge */
   deletable?: boolean
   /** Additional class names, can be a string or a callback returning a string (receives current flow element) */
-  class?: string | string[] | Record<string, any> | ClassFunc<GraphEdge<Data, CustomEvents>>
+  class?: string | string[] | Record<string, any>
   /** Additional styles, can be an object or a callback returning an object (receives current flow element) */
-  style?: Styles | StyleFunc<GraphEdge<Data, CustomEvents>>
+  style?: Styles
   /** Is edge hidden */
   hidden?: boolean
   /** Radius of mouse event triggers (to ease selecting edges), defaults to 2 */
@@ -103,8 +98,6 @@ export interface DefaultEdge<
   template?: EdgeComponent
   /** Additional data that is passed to your custom components */
   data?: Data
-  /** @deprecated will be removed in the next major version */
-  events?: Partial<EdgeEventsHandler<CustomEvents>>
   /** Aria label for edge (a11y) */
   zIndex?: number
   ariaLabel?: string | null
@@ -115,10 +108,7 @@ export interface SmoothStepPathOptions {
   borderRadius?: number
 }
 
-export type SmoothStepEdgeType<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any> = DefaultEdge<
-  Data,
-  CustomEvents
-> & {
+export type SmoothStepEdgeType<Data = ElementData> = DefaultEdge<Data> & {
   type: 'smoothstep'
   pathOptions?: SmoothStepPathOptions
 }
@@ -127,18 +117,15 @@ export interface BezierPathOptions {
   curvature?: number
 }
 
-export type BezierEdgeType<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any> = DefaultEdge<
-  Data,
-  CustomEvents
-> & {
+export type BezierEdgeType<Data = ElementData> = DefaultEdge<Data> & {
   type: 'default'
   pathOptions?: BezierPathOptions
 }
 
-export type Edge<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any, Type extends string = string> =
-  | DefaultEdge<Data, CustomEvents, Type>
-  | SmoothStepEdgeType<Data, CustomEvents>
-  | BezierEdgeType<Data, CustomEvents>
+export type Edge<Data = ElementData, Type extends string = string> =
+  | DefaultEdge<Data, Type>
+  | SmoothStepEdgeType<Data>
+  | BezierEdgeType<Data>
 
 export type DefaultEdgeOptions = Omit<Edge, 'id' | 'source' | 'target' | 'sourceHandle' | 'targetHandle'>
 
@@ -150,24 +137,14 @@ export interface EdgePositions {
 }
 
 /** Internal edge type */
-export type GraphEdge<
-  Data = ElementData,
-  CustomEvents extends Record<string, CustomEvent> = any,
-  Type extends string = string,
-> = Edge<Data, CustomEvents> & {
+export type GraphEdge<Data = ElementData, Type extends string = string> = Edge<Data> & {
   selected: boolean
-  sourceNode: GraphNode
-  targetNode: GraphNode
   data: Data
-  /** @deprecated will be removed in the next major version */
-  events: Partial<EdgeEventsHandler<CustomEvents>>
   type: Type
 } & EdgePositions
 
 /** these props are passed to edge components */
-export interface EdgeProps<Data = ElementData, CustomEvents = object, Type extends string = string>
-  extends EdgeLabelOptions,
-    EdgePositions {
+export interface EdgeProps<Data = ElementData, Type extends string = string> extends EdgeLabelOptions, EdgePositions {
   id: string
   sourceNode: GraphNode
   targetNode: GraphNode
@@ -188,8 +165,6 @@ export interface EdgeProps<Data = ElementData, CustomEvents = object, Type exten
   curvature?: number
   interactionWidth?: number
   data: Data
-  /** contextual and custom events of edge */
-  events: EdgeEventsOn<CustomEvents>
 }
 
 export interface BaseEdgeProps extends EdgeLabelOptions {
@@ -223,9 +198,3 @@ export type SmoothStepEdgeProps = EdgePositions &
   Omit<BaseEdgeProps, 'labelX' | 'labelY' | 'path'> &
   Pick<EdgeProps, 'sourcePosition' | 'targetPosition'> &
   SmoothStepPathOptions
-
-export type ToGraphEdge<T extends Edge> = GraphEdge<
-  T extends Edge<infer Data> ? Data : never,
-  T extends Edge<never, infer CustomEvents> ? CustomEvents : never,
-  T extends Edge<never, never, infer Type> ? Type : never
->
diff --git a/packages/core/src/types/flow.ts b/packages/core/src/types/flow.ts
index 85fef24e0..7a11b26c5 100644
--- a/packages/core/src/types/flow.ts
+++ b/packages/core/src/types/flow.ts
@@ -4,18 +4,10 @@ import type { D3ZoomEvent } from 'd3-zoom'
 import type { VueFlowError } from '../utils'
 import type { DefaultEdgeOptions, Edge, EdgeProps, EdgeUpdatable, GraphEdge } from './edge'
 import type { CoordinateExtent, CoordinateExtentRange, GraphNode, Node, NodeProps } from './node'
-import type {
-  Connection,
-  ConnectionLineOptions,
-  ConnectionLineProps,
-  ConnectionLineType,
-  ConnectionMode,
-  Connector,
-  OnConnectStartParams,
-} from './connection'
+import type { Connection, ConnectionLineOptions, ConnectionLineProps, ConnectionMode, OnConnectStartParams } from './connection'
 import type { PanOnScrollMode, ViewportTransform } from './zoom'
 import type { EdgeTypesObject, NodeTypesObject } from './components'
-import type { CustomEvent, EdgeMouseEvent, EdgeUpdateEvent, NodeDragEvent, NodeMouseEvent } from './hooks'
+import type { EdgeMouseEvent, EdgeUpdateEvent, NodeDragEvent, NodeMouseEvent } from './hooks'
 import type { ValidConnectionFunc } from './handle'
 import type { EdgeChange, NodeChange } from './changes'
 import type { VueFlowStore } from './store'
@@ -23,48 +15,12 @@ import type { VueFlowStore } from './store'
 // todo: should be object type
 export type ElementData = any
 
-/**
- * @deprecated - will be removed in the next major version
- * A flow element (after parsing into state)
- */
-export type FlowElement<
-  NodeData = ElementData,
-  EdgeData = ElementData,
-  NodeEvents extends Record<string, CustomEvent> = any,
-  EdgeEvents extends Record<string, CustomEvent> = any,
-> = GraphNode<NodeData, NodeEvents> | GraphEdge<EdgeData, EdgeEvents>
-
-/**
- * @deprecated - will be removed in the next major version
- * An array of flow elements (after parsing into state)
- */
-export type FlowElements<
-  NodeData = ElementData,
-  EdgeData = ElementData,
-  NodeEvents extends Record<string, CustomEvent> = any,
-  EdgeEvents extends Record<string, CustomEvent> = any,
-> = FlowElement<NodeData, EdgeData, NodeEvents, EdgeEvents>[]
-
 /** Initial elements (before parsing into state) */
-export type Element<
-  NodeData = ElementData,
-  EdgeData = ElementData,
-  NodeEvents extends Record<string, CustomEvent> = any,
-  EdgeEvents extends Record<string, CustomEvent> = any,
-> = Node<NodeData, NodeEvents> | Edge<EdgeData, EdgeEvents>
+export type Element<NodeData = ElementData, EdgeData = ElementData> = Node<NodeData> | Edge<EdgeData>
 
-export type Elements<
-  NodeData = ElementData,
-  EdgeData = ElementData,
-  NodeEvents extends Record<string, CustomEvent> = any,
-  EdgeEvents extends Record<string, CustomEvent> = any,
-> = Element<NodeData, EdgeData, NodeEvents, EdgeEvents>[]
+export type Elements<NodeData = ElementData, EdgeData = ElementData> = Element<NodeData, EdgeData>[]
 
-export type MaybeElement = Node | Edge | Connection | FlowElement | Element
-
-export interface CustomThemeVars {
-  [key: string]: string | number | undefined
-}
+export type MaybeElement = Node | Edge | Connection | Element
 
 export type CSSVars =
   | '--vf-node-color'
@@ -75,12 +31,8 @@ export type CSSVars =
   | '--vf-handle'
 
 export type ThemeVars = { [key in CSSVars]?: CSSProperties['color'] }
-export type Styles = CSSProperties & ThemeVars & CustomThemeVars
-/** @deprecated will be removed in the next major version */
-export type ClassFunc<ElementType extends FlowElement = FlowElement> = (element: ElementType) => string | void
 
-/** @deprecated will be removed in the next major version */
-export type StyleFunc<ElementType extends FlowElement = FlowElement> = (element: ElementType) => Styles | void
+export type Styles = CSSProperties & ThemeVars
 
 /** Handle Positions */
 export enum Position {
@@ -126,27 +78,12 @@ export interface FlowExportObject {
   nodes: Node[]
   /** exported edges */
   edges: Edge[]
-  /**
-   * exported viewport position
-   * @deprecated use {@link FlowExportObject.viewport} instead
-   */
-  position: [x: number, y: number]
-  /**
-   * exported zoom level
-   * @deprecated use {@link FlowExportObject.viewport} instead
-   */
-  zoom: number
   /** exported viewport (position + zoom) */
   viewport: ViewportTransform
 }
 
 export interface FlowProps {
   id?: string
-  /**
-   * all elements (nodes + edges)
-   * @deprecated use {@link FlowProps.nodes} & {@link FlowProps.nodes} instead
-   */
-  modelValue?: Elements
   nodes?: Node[]
   edges?: Edge[]
   /** either use the edgeTypes prop to define your edge-types or use slots (<template #edge-mySpecialType="props">) */
@@ -154,10 +91,6 @@ export interface FlowProps {
   /** either use the nodeTypes prop to define your node-types or use slots (<template #node-mySpecialType="props">) */
   nodeTypes?: NodeTypesObject
   connectionMode?: ConnectionMode
-  /** @deprecated use {@link ConnectionLineOptions.type} */
-  connectionLineType?: ConnectionLineType | null
-  /** @deprecated use {@link ConnectionLineOptions.style} */
-  connectionLineStyle?: CSSProperties | null
   connectionLineOptions?: ConnectionLineOptions
   connectionRadius?: number
   isValidConnection?: ValidConnectionFunc | null
@@ -202,16 +135,6 @@ export interface FlowProps {
   fitViewOnInit?: boolean
   /** allow connection with click handlers, i.e. support touch devices */
   connectOnClick?: boolean
-  /**
-   * apply default change handlers for position, dimensions, adding/removing nodes. set this to false if you want to apply the changes manually
-   * @deprecated - will be removed in the next major version, changes will not be auto applied in the future
-   */
-  applyDefault?: boolean
-  /**
-   * automatically create an edge when connection is triggered
-   * @deprecated - will be removed in the next major version
-   */
-  autoConnect?: boolean | Connector
   noDragClassName?: string
   noWheelClassName?: string
   noPanClassName?: string
@@ -231,12 +154,6 @@ export interface FlowProps {
   autoPanSpeed?: number
 }
 
-/**
- * All available VueFlow options
- * @deprecated use the {@link FlowProps} type instead
- */
-export type FlowOptions = FlowProps
-
 export interface FlowEmits {
   (event: 'nodesChange', changes: NodeChange[]): void
   (event: 'edgesChange', changes: EdgeChange[]): void
@@ -273,8 +190,6 @@ export interface FlowEmits {
   (event: 'viewportChangeStart', viewport: ViewportTransform): void
   (event: 'viewportChange', viewport: ViewportTransform): void
   (event: 'viewportChangeEnd', viewport: ViewportTransform): void
-  /** @deprecated use `init` instead */
-  (event: 'paneReady', paneEvent: VueFlowStore): void
   (event: 'init', paneEvent: VueFlowStore): void
   (event: 'paneScroll', paneEvent: WheelEvent | undefined): void
   (event: 'paneClick', paneEvent: MouseEvent): void
@@ -305,8 +220,6 @@ export interface FlowEmits {
   (event: 'nodeDrag', nodeDragEvent: NodeDragEvent): void
   (event: 'nodeDragStop', nodeDragEvent: NodeDragEvent): void
 
-  /** v-model event definitions */
-  (event: 'update:modelValue', value: FlowElements): void
   (event: 'update:nodes', value: GraphNode[]): void
   (event: 'update:edges', value: GraphEdge[]): void
 }
diff --git a/packages/core/src/types/hooks.ts b/packages/core/src/types/hooks.ts
index 03e8f1d17..3f6eb3186 100644
--- a/packages/core/src/types/hooks.ts
+++ b/packages/core/src/types/hooks.ts
@@ -60,8 +60,6 @@ export interface FlowEvents {
     event?: MouseEvent | TouchEvent
   } & OnConnectStartParams
   clickConnectEnd: MouseEvent | TouchEvent | undefined
-  /** @deprecated use `init` instead */
-  paneReady: VueFlowStore
   init: VueFlowStore
   move: { event: D3ZoomEvent<HTMLDivElement, any> | WheelEvent; flowTransform: ViewportTransform }
   moveStart: { event: D3ZoomEvent<HTMLDivElement, any> | WheelEvent; flowTransform: ViewportTransform }
diff --git a/packages/core/src/types/node.ts b/packages/core/src/types/node.ts
index 582e1ef3c..558b14de8 100644
--- a/packages/core/src/types/node.ts
+++ b/packages/core/src/types/node.ts
@@ -1,8 +1,5 @@
-import type { Component, VNode } from 'vue'
-import type { ClassFunc, Dimensions, ElementData, Position, StyleFunc, Styles, XYPosition, XYZPosition } from './flow'
-import type { NodeComponent } from './components'
-import type { HandleConnectable, HandleElement, ValidConnectionFunc } from './handle'
-import type { CustomEvent, NodeEventsHandler, NodeEventsOn } from './hooks'
+import type { Dimensions, ElementData, Position, Styles, XYPosition, XYZPosition } from './flow'
+import type { HandleConnectable, HandleElement } from './handle'
 
 /** Defined as [[x-from, y-from], [x-to, y-to]] */
 export type CoordinateExtent = [extentFrom: [fromX: number, fromY: number], extentTo: [toX: number, toY: number]]
@@ -23,20 +20,9 @@ export interface NodeHandleBounds {
   target?: HandleElement[]
 }
 
-/** @deprecated will be removed in next major release */
-export type WidthFunc = (node: GraphNode) => number | string | void
-
-/** @deprecated will be removed in next major release */
-export type HeightFunc = (node: GraphNode) => number | string | void
-
-export interface Node<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any, Type extends string = string> {
+export interface Node<Data = ElementData, Type extends string = string> {
   /** Unique node id */
   id: string
-  /**
-   * @deprecated - will be removed in next major release and replaced with `{ data: { label: string | VNode | Component } }`
-   * A node label
-   */
-  label?: string | VNode | Component
   /** initial node position x, y */
   position: XYPosition
   /** node type, can be a default type or a custom type */
@@ -57,16 +43,6 @@ export interface Node<Data = ElementData, CustomEvents extends Record<string, Cu
   deletable?: boolean
   /** element selector as drag handle for node (can only be dragged from the dragHandle el) */
   dragHandle?: string
-  /**
-   * @deprecated will be removed in next major release
-   *  called when used as target for new connection
-   */
-  isValidTargetPos?: ValidConnectionFunc
-  /**
-   * @deprecated will be removed in next major release
-   * called when used as source for new connection
-   */
-  isValidSourcePos?: ValidConnectionFunc
   /** define node extent, i.e. area in which node can be moved */
   extent?: CoordinateExtent | CoordinateExtentRange | 'parent'
   /** expands parent area to fit child node */
@@ -81,41 +57,27 @@ export interface Node<Data = ElementData, CustomEvents extends Record<string, Cu
    * You can pass a number which will be used in pixel values (width: 300 -> width: 300px)
    * or pass a string with units (width: `10rem` -> width: 10rem)
    */
-  width?: number | string | WidthFunc
+  width?: number | string
   /**
    * Fixed height of node, applied as style
    * You can pass a number which will be used in pixel values (height: 300 -> height: 300px)
    * or pass a string with units (height: `10rem` -> height: 10rem)
    */
-  height?: number | string | HeightFunc
+  height?: number | string
 
   /** Additional class names, can be a string or a callback returning a string (receives current flow element) */
-  class?: string | string[] | Record<string, any> | ClassFunc<GraphNode<Data, CustomEvents>>
+  class?: string | string[] | Record<string, any>
   /** Additional styles, can be an object or a callback returning an object (receives current flow element) */
-  style?: Styles | StyleFunc<GraphNode<Data, CustomEvents>>
+  style?: Styles
   /** Is node hidden */
   hidden?: boolean
-  /**
-   * @deprecated - will be removed in the next major release
-   * overwrites current node type
-   */
-  template?: NodeComponent
   /** Additional data that is passed to your custom components */
   data?: Data
-  /**
-   * @deprecated - will be removed in the next major release
-   * contextual and custom events that are passed to your custom components
-   */
-  events?: Partial<NodeEventsHandler<CustomEvents>>
   zIndex?: number
   ariaLabel?: string
 }
 
-export interface GraphNode<
-  Data = ElementData,
-  CustomEvents extends Record<string, CustomEvent> = any,
-  Type extends string = string,
-> extends Node<Data, CustomEvents, Type> {
+export interface GraphNode<Data = ElementData, Type extends string = string> extends Node<Data, Type> {
   /** absolute position in relation to parent elements + z-index */
   computedPosition: XYZPosition
   handleBounds: NodeHandleBounds
@@ -126,13 +88,11 @@ export interface GraphNode<
   resizing: boolean
   dragging: boolean
   data: Data
-  /** @deprecated will be removed in the next major version */
-  events: Partial<NodeEventsHandler<CustomEvents>>
   type: Type
 }
 
 /** these props are passed to node components */
-export interface NodeProps<Data = ElementData, CustomEvents = object, Type extends string = string> {
+export interface NodeProps<Data = ElementData, Type extends string = string> {
   /** unique node id */
   id: string
   /** node type */
@@ -141,40 +101,10 @@ export interface NodeProps<Data = ElementData, CustomEvents = object, Type exten
   selected: boolean
   /** can node handles be connected, you need to forward this to your handles for this prop to have any effect */
   connectable: HandleConnectable
-  /**
-   * @deprecated - will be removed in next major release and replaced with `computedPosition`
-   * node x, y (relative) position on graph
-   */
-  position: XYPosition
   /** dom element dimensions (width, height) */
   dimensions: Dimensions
-  /**
-   * @deprecated - will be removed in next major release and replaced with `{ data: { label: string | VNode | Component } }`
-   * node label, either pass a string or a VNode
-   * For example like this: `h('div', props, children)`)
-   * Object is just a type-hack for Vue, ignore that
-   */
-  label?: string | VNode | Component | object
-  /**
-   * @deprecated will be removed in next major release
-   * called when used as target for new connection
-   */
-  isValidTargetPos?: ValidConnectionFunc
-  /**
-   * @deprecated will be removed in next major release
-   * called when used as source for new connection
-   */
-  isValidSourcePos?: ValidConnectionFunc
-  /**
-   * @deprecated - will be removed in next major release. Use `parentNodeId` instead
-   * parent node id
-   */
-  parent?: string
-  /**
-   * todo: rename to `parentId` in next major release
-   * parent node id
-   */
-  parentNodeId?: string
+  /** parent node id */
+  parentId?: string
   /** is node currently dragging */
   dragging: boolean
   /** is node currently resizing */
@@ -187,21 +117,6 @@ export interface NodeProps<Data = ElementData, CustomEvents = object, Type exten
   sourcePosition?: Position
   /** drag handle query selector */
   dragHandle?: string
-
   /** additional data of node */
   data: Data
-  /**
-   * @deprecated - will be removed in next major release
-   * contextual and custom events of node
-   */
-  events: NodeEventsOn<CustomEvents>
 }
-
-/**
- * Transform a Node type to a GraphNode type
- */
-export type ToGraphNode<T extends Node> = GraphNode<
-  T extends Node<infer Data> ? Data : never,
-  T extends Node<any, infer Events> ? Events : never,
-  T extends Node<any, any, infer Type> ? Type : never
->
diff --git a/packages/core/src/types/panel.ts b/packages/core/src/types/panel.ts
index 9a299ca34..897fd3639 100644
--- a/packages/core/src/types/panel.ts
+++ b/packages/core/src/types/panel.ts
@@ -1,17 +1,5 @@
-/**
- * @deprecated; todo: remove this and use `PanelPositionType` instead
- */
-export enum PanelPosition {
-  TopLeft = 'top-left',
-  TopCenter = 'top-center',
-  TopRight = 'top-right',
-  BottomLeft = 'bottom-left',
-  BottomCenter = 'bottom-center',
-  BottomRight = 'bottom-right',
-}
-
 export type PanelPositionType = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
 
 export interface PanelProps {
-  position: PanelPosition | PanelPositionType
+  position: PanelPositionType
 }
diff --git a/packages/core/src/types/store.ts b/packages/core/src/types/store.ts
index 481922fb5..a495c0bb9 100644
--- a/packages/core/src/types/store.ts
+++ b/packages/core/src/types/store.ts
@@ -1,13 +1,10 @@
-import type { CSSProperties, ComputedRef, ToRefs } from 'vue'
+import type { ComputedRef, ToRefs } from 'vue'
 import type { KeyFilter } from '@vueuse/core'
 import type { ViewportHelper } from '../composables'
 import type {
   Dimensions,
   ElementData,
-  Elements,
-  FlowElements,
   FlowExportObject,
-  FlowOptions,
   FlowProps,
   Rect,
   SelectionMode,
@@ -16,19 +13,11 @@ import type {
   XYPosition,
 } from './flow'
 import type { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components'
-import type {
-  Connection,
-  ConnectionLineOptions,
-  ConnectionLineType,
-  ConnectionLookup,
-  ConnectionMode,
-  ConnectionStatus,
-  Connector,
-} from './connection'
+import type { ConnectionLineOptions, ConnectionLookup, ConnectionMode, ConnectionStatus, Connector } from './connection'
 import type { DefaultEdgeOptions, Edge, EdgeUpdatable, GraphEdge } from './edge'
 import type { CoordinateExtent, CoordinateExtentRange, GraphNode, Node } from './node'
 import type { D3Selection, D3Zoom, D3ZoomHandler, PanOnScrollMode, ViewportTransform } from './zoom'
-import type { CustomEvent, FlowHooks, FlowHooksEmit, FlowHooksOn } from './hooks'
+import type { FlowHooks, FlowHooksEmit, FlowHooksOn } from './hooks'
 import type { EdgeChange, NodeChange, NodeDragItem } from './changes'
 import type { ConnectingHandle, ValidConnectionFunc } from './handle'
 
@@ -89,10 +78,6 @@ export interface State extends Omit<FlowProps, 'id' | 'modelValue'> {
 
   connectionMode: ConnectionMode
   connectionLineOptions: ConnectionLineOptions
-  /** @deprecated use {@link ConnectionLineOptions.type} */
-  connectionLineType: ConnectionLineType | null
-  /** @deprecated use {@link ConnectionLineOptions.style} */
-  connectionLineStyle: CSSProperties | null
   connectionStartHandle: ConnectingHandle | null
   connectionEndHandle: ConnectingHandle | null
   connectionClickStartHandle: ConnectingHandle | null
@@ -161,173 +146,254 @@ export interface State extends Omit<FlowProps, 'id' | 'modelValue'> {
   ariaLiveMessage: string
 }
 
-export type SetElements = (elements: Elements | ((elements: FlowElements) => Elements)) => void
-
-export type SetNodes = (nodes: Node[] | ((nodes: GraphNode[]) => Node[])) => void
-
-export type SetEdges = (edges: Edge[] | ((edges: GraphEdge[]) => Edge[])) => void
-
-export type AddNodes = (nodes: Node | Node[] | ((nodes: GraphNode[]) => Node | Node[])) => void
-
-export type RemoveNodes = (
-  nodes: (string | Node) | (Node | string)[] | ((nodes: GraphNode[]) => (string | Node) | (Node | string)[]),
-  removeConnectedEdges?: boolean,
-  removeChildren?: boolean,
-) => void
-
-export type RemoveEdges = (
-  edges: (string | Edge) | (Edge | string)[] | ((edges: GraphEdge[]) => (string | Edge) | (Edge | string)[]),
-) => void
-
-export type AddEdges = (
-  edgesOrConnections:
-    | (Edge | Connection)
-    | (Edge | Connection)[]
-    | ((edges: GraphEdge[]) => (Edge | Connection) | (Edge | Connection)[]),
-) => void
-
-export type UpdateEdge = (oldEdge: GraphEdge, newConnection: Connection, shouldReplaceId?: boolean) => GraphEdge | false
+export interface Actions extends Omit<ViewportHelper, 'viewportInitialized'> {
+  /**
+   * Sets nodes.
+   *
+   * @param nodes - the nodes to set or a function that receives the current nodes and returns the new nodes
+   */
+  setNodes: (nodes: Node[] | ((nodes: GraphNode[]) => Node[])) => void
 
-export type UpdateEdgeData = <Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(
-  id: string,
-  dataUpdate: Partial<Data> | ((edge: GraphEdge<Data, CustomEvents>) => Partial<Data>),
-  options?: { replace: boolean },
-) => void
+  /**
+   * Sets edges.
+   *
+   * @param edges - the edges to set or a function that receives the current edges and returns the new edges
+   */
+  setEdges: (edges: Edge[] | ((edges: GraphEdge[]) => Edge[])) => void
 
-export type SetState = (
-  state:
-    | Partial<FlowOptions & Omit<State, 'nodes' | 'edges' | 'modelValue'>>
-    | ((state: State) => Partial<FlowOptions & Omit<State, 'nodes' | 'edges' | 'modelValue'>>),
-) => void
+  /**
+   * Adds nodes.
+   *
+   * @param nodes - the nodes to add
+   */
+  addNodes: (nodes: Node | Node[]) => void
 
-export type UpdateNodePosition = (dragItems: NodeDragItem[], changed: boolean, dragging: boolean) => void
+  /**
+   * Adds edges.
+   *
+   * @param edges - the edges to add
+   */
+  addEdges: (edges: Edge | Edge[]) => void
 
-export type UpdateNodeDimensions = (updates: UpdateNodeDimensionsParams[]) => void
+  /**
+   * Removes nodes from state.
+   *
+   * @param nodes - the nodes or its id(s) to remove or a function that receives the current nodes and returns the nodes or its id(s) to remove
+   * @param options - extra options for the removal
+   * @param options.removeConnectedEdges - if true, connected edges will be removed as well
+   * @param options.removeChildren - if true, children will be removed as well
+   */
+  removeNodes: (
+    nodes: (string | Node) | (Node | string)[] | ((nodes: GraphNode[]) => (string | Node) | (Node | string)[]),
+    options?: { removeConnectedEdges?: boolean; removeChildren?: boolean },
+  ) => void
 
-export type UpdateNodeInternals = (nodeIds?: string[]) => void
+  /**
+   * Removes edges from state.
+   *
+   * @param edges - the edges or its id(s) to remove or a function that receives the current edges and returns the edges or its id(s) to remove
+   */
+  removeEdges: (
+    edges: (string | Edge) | (Edge | string)[] | ((edges: GraphEdge[]) => (string | Edge) | (Edge | string)[]),
+  ) => void
 
-export type FindNode = <Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(
-  id: string | undefined | null,
-) => GraphNode<Data, CustomEvents> | undefined
+  /**
+   * Get a node by id.
+   *
+   * @param id - the node id
+   */
+  getNode: <Data = ElementData>(id: string) => GraphNode<Data> | undefined
 
-export type FindEdge = <Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(
-  id: string | undefined | null,
-) => GraphEdge<Data, CustomEvents> | undefined
+  /**
+   * Get a edge by id.
+   *
+   * @param id - the edge id
+   */
+  getEdge: <Data = ElementData>(id: string) => GraphEdge<Data> | undefined
 
-export type GetIntersectingNodes = (
-  node: (Partial<Node> & { id: Node['id'] }) | Rect,
-  partially?: boolean,
-  nodes?: GraphNode[],
-) => GraphNode[]
+  /**
+   * Updates an edge.
+   *
+   * @param id - id of the edge to update
+   * @param edgeUpdate - the edge update as an object or a function that receives the current edge and returns the edge update
+   * @param options.replace - if true, the edge is replaced with the edge update, otherwise the changes get merged
+   *
+   * @example
+   * updateEdge('edge-1', (edge) => ({ label: 'A new label' }));
+   */
+  updateEdge: (
+    id: string,
+    edgeUpdate: Partial<GraphEdge> | ((edge: GraphEdge) => Partial<GraphEdge>),
+    options?: { replace: boolean },
+  ) => void
 
-export type UpdateNode = <Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(
-  id: string,
-  nodeUpdate: Partial<Node<Data, CustomEvents>> | ((node: GraphNode<Data, CustomEvents>) => Partial<Node<Data, CustomEvents>>),
-  options?: { replace: boolean },
-) => void
+  /**
+   * Updates the data attribute of a edge.
+   *
+   * @param id - id of the edge to update
+   * @param dataUpdate - the data update as an object or a function that receives the current data and returns the data update
+   * @param options.replace - if true, the data is replaced with the data update, otherwise the changes get merged
+   *
+   * @example
+   * updateEdgeData('edge-1', { label: 'A new label' });
+   */
+  updateEdgeData: (
+    id: string,
+    dataUpdate: Partial<GraphEdge['data']> | ((edge: GraphEdge) => Partial<GraphEdge['data']>),
+    options?: { replace: boolean },
+  ) => void
 
-export type UpdateNodeData = <Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(
-  id: string,
-  dataUpdate: Partial<Data> | ((node: GraphNode<Data, CustomEvents>) => Partial<Data>),
-  options?: { replace: boolean },
-) => void
+  /**
+   * Updates a node.
+   *
+   * @param id - id of the node to update
+   * @param nodeUpdate - the node update as an object or a function that receives the current node and returns the node update
+   * @param options.replace - if true, the node is replaced with the node update, otherwise the changes get merged
+   *
+   * @example
+   * updateNode('node-1', (node) => ({ position: { x: node.position.x + 10, y: node.position.y } }));
+   */
+  updateNode: (
+    id: string,
+    nodeUpdate: Partial<GraphNode> | ((node: GraphNode) => Partial<GraphNode>),
+    options?: { replace: boolean },
+  ) => void
 
-export type IsNodeIntersecting = (node: (Partial<Node> & { id: Node['id'] }) | Rect, area: Rect, partially?: boolean) => boolean
+  /**
+   * Updates the data attribute of a node.
+   *
+   * @param id - id of the node to update
+   * @param dataUpdate - the data update as an object or a function that receives the current data and returns the data update
+   * @param options.replace - if true, the data is replaced with the data update, otherwise the changes get merged
+   *
+   * @example
+   * updateNodeData('node-1', { label: 'A new label' });
+   */
+  updateNodeData: (
+    id: string,
+    dataUpdate: Partial<GraphNode['data']> | ((node: GraphNode) => Partial<GraphNode['data']>),
+    options?: { replace: boolean },
+  ) => void
 
-export interface Actions extends Omit<ViewportHelper, 'viewportInitialized'> {
-  /** parses elements (nodes + edges) and re-sets the state */
-  setElements: SetElements
-  /** parses nodes and re-sets the state */
-  setNodes: SetNodes
-  /** parses edges and re-sets the state */
-  setEdges: SetEdges
-  /** parses nodes and adds to state */
-  addNodes: AddNodes
-  /** parses edges and adds to state */
-  addEdges: AddEdges
-  /** remove nodes (and possibly connected edges and children) from state */
-  removeNodes: RemoveNodes
-  /** remove edges from state */
-  removeEdges: RemoveEdges
-  /** find a node by id */
-  findNode: FindNode
-  /** find an edge by id */
-  findEdge: FindEdge
-  /** updates an edge */
-  updateEdge: UpdateEdge
-  /** updates the data of an edge */
-  updateEdgeData: UpdateEdgeData
-  /** updates a node */
-  updateNode: UpdateNode
-  /** updates the data of a node */
-  updateNodeData: UpdateNodeData
   /** applies default edge change handler */
   applyEdgeChanges: (changes: EdgeChange[]) => GraphEdge[]
+
   /** applies default node change handler */
   applyNodeChanges: (changes: NodeChange[]) => GraphNode[]
-  /**
-   * manually select elements and add to state
-   * @deprecated will be removed in the next major, use {@link Actions.addSelectedNodes} or {@link Actions.addSelectedEdges} instead
-   */
-  addSelectedElements: (elements: FlowElements) => void
+
   /** manually select edges and add to state */
   addSelectedEdges: (edges: GraphEdge[]) => void
+
   /** manually select nodes and add to state */
   addSelectedNodes: (nodes: GraphNode[]) => void
+
   /** manually unselect edges and remove from state */
-  removeSelectedEdges: (edges: GraphEdge[]) => void
+  removeSelectedEdges: (edges?: GraphEdge[]) => void
+
   /** manually unselect nodes and remove from state */
-  removeSelectedNodes: (nodes: GraphNode[]) => void
-  /**
-   * @deprecated will be replaced in the next major
-   * unselect selected elements (if none are passed, all elements are unselected)
-   */
-  removeSelectedElements: (elements?: Elements) => void
+  removeSelectedNodes: (nodes?: GraphNode[]) => void
+
   /** apply min zoom value to d3 */
   setMinZoom: (zoom: number) => void
+
   /** apply max zoom value to d3 */
   setMaxZoom: (zoom: number) => void
+
   /** apply translate extent to d3 */
   setTranslateExtent: (translateExtent: CoordinateExtent) => void
+
   /** apply extent to nodes */
   setNodeExtent: (nodeExtent: CoordinateExtent | CoordinateExtentRange) => void
+
   setPaneClickDistance: (distance: number) => void
+
   /** enable/disable node interaction (dragging, selecting etc) */
   setInteractive: (isInteractive: boolean) => void
-  /** set new state */
-  setState: SetState
+
+  /**
+   * Set the state.
+   *
+   * @param state - the state to set or a function that receives the current state and returns the new state
+   */
+  setState: (
+    state:
+      | Partial<FlowProps & Omit<State, 'nodes' | 'edges' | 'modelValue'>>
+      | ((state: State) => Partial<FlowProps & Omit<State, 'nodes' | 'edges' | 'modelValue'>>),
+  ) => void
+
   /** return an object of graph values (elements, viewport transform) for storage and re-loading a graph */
   toObject: () => FlowExportObject
+
   /** load graph from export obj */
   fromObject: (obj: FlowExportObject) => Promise<boolean>
+
   /** force update node internal data, if handle bounds are incorrect, you might want to use this */
-  updateNodeInternals: UpdateNodeInternals
+  updateNodeInternals: (nodeIds?: string[]) => void
+
   /** start a connection */
   startConnection: (startHandle: ConnectingHandle, position?: XYPosition, isClick?: boolean) => void
+
   /** update connection position */
   updateConnection: (position: XYPosition, result?: ConnectingHandle | null, status?: ConnectionStatus | null) => void
+
   /** end (or cancel) a connection */
   endConnection: (event?: MouseEvent | TouchEvent, isClick?: boolean) => void
 
-  /** internal position updater, you probably don't want to use this */
-  updateNodePositions: UpdateNodePosition
-  /** internal dimensions' updater, you probably don't want to use this */
-  updateNodeDimensions: UpdateNodeDimensions
+  /**
+   * Update node positions.
+   *
+   * internal position updater, you shouldn't use this
+   *
+   * @internal
+   * @param dragItems - the drag items
+   * @param changed - if the positions have changed
+   * @param dragging - if the items are currently being dragged
+   */
+  updateNodePositions: (dragItems: NodeDragItem[], changed: boolean, dragging: boolean) => void
+
+  /**
+   * Update node dimensions.
+   *
+   * internal dimension updater, you shouldn't use this
+   *
+   * @internal
+   * @param updates - the updates
+   */
+  updateNodeDimensions: (updates: UpdateNodeDimensionsParams[]) => void
+
+  /**
+   * Check if a node or a rect is intersecting with other nodes.
+   *
+   * @param nodeOrRect - the node or rect to check for intersections
+   * @param partially - if true, the node is considered to be intersecting if it partially overlaps with the passed node or rect
+   * @param nodes - optional nodes array to check for intersections
+   */
+  getIntersectingNodes: (
+    nodeOrRect: (Partial<Node> & { id: Node['id'] }) | Rect,
+    partially?: boolean,
+    nodes?: GraphNode[],
+  ) => GraphNode[]
+
+  /**
+   * Check if a node or a rect is intersecting with the passed rect.
+   *
+   * @param nodeOrRect - the node or rect to check for intersections
+   * @param area - the rect to check for intersections
+   * @param partially - if true, the node is considered to be intersecting if it partially overlaps with the passed react
+   */
+  isNodeIntersecting: (nodeOrRect: (Partial<Node> & { id: Node['id'] }) | Rect, area: Rect, partially?: boolean) => boolean
 
-  /** returns all node intersections */
-  getIntersectingNodes: GetIntersectingNodes
-  /** check if a node is intersecting with a defined area */
-  isNodeIntersecting: IsNodeIntersecting
   /** get a node's incomers */
   getIncomers: (nodeOrId: Node | string) => GraphNode[]
+
   /** get a node's outgoers */
   getOutgoers: (nodeOrId: Node | string) => GraphNode[]
+
   /** get a node's connected edges */
   getConnectedEdges: (nodesOrId: Node[] | string) => GraphEdge[]
+
   /** pan the viewport; return indicates if a transform has happened or not */
   panBy: (delta: XYPosition) => boolean
-  /** viewport helper instance */
-  viewportHelper: ComputedRef<ViewportHelper>
 
   /** reset state to defaults */
   $reset: () => void
@@ -341,41 +407,14 @@ export interface Getters {
   getEdgeTypes: Record<keyof DefaultEdgeTypes | string, EdgeComponent>
   /** returns object containing current node types */
   getNodeTypes: Record<keyof DefaultNodeTypes | string, NodeComponent>
-  /**
-   * get all elements
-   * @deprecated - will be removed in next major version
-   */
-  getElements: FlowElements
   /** all visible node */
   getNodes: GraphNode[]
   /** all visible edges */
   getEdges: GraphEdge[]
-  /**
-   * returns a node by id
-   * @deprecated use {@link Actions.findNode} instead
-   */
-  getNode: (id: string) => GraphNode | undefined
-  /**
-   * returns an edge by id
-   * @deprecated use {@link Actions.findEdge} instead
-   */
-  getEdge: (id: string) => GraphEdge | undefined
-  /** returns all currently selected elements */
-  getSelectedElements: FlowElements
   /** returns all currently selected nodes */
   getSelectedNodes: GraphNode[]
   /** returns all currently selected edges */
   getSelectedEdges: GraphEdge[]
-  /**
-   * returns all nodes that are initialized, i.e. they have actual dimensions
-   * @deprecated - will be removed in next major version; use {@link useNodesInitialized} instead
-   */
-  getNodesInitialized: GraphNode[]
-  /**
-   * returns a boolean flag whether all current nodes are initialized
-   * @deprecated - will be removed in next major version; use {@link useNodesInitialized} instead
-   */
-  areNodesInitialized: boolean
 }
 
 export type ComputedGetters = {
diff --git a/packages/core/src/types/zoom.ts b/packages/core/src/types/zoom.ts
index 198baa1e8..00eba7244 100644
--- a/packages/core/src/types/zoom.ts
+++ b/packages/core/src/types/zoom.ts
@@ -71,11 +71,7 @@ export interface ViewportFunctions {
   zoomOut: ZoomInOut
   zoomTo: ZoomTo
   setViewport: SetViewport
-  /** @deprecated use setViewport instead */
-  setTransform: SetViewport
   getViewport: GetViewport
-  /** @deprecated use getViewport instead */
-  getTransform: GetViewport
   fitView: FitView
   setCenter: SetCenter
   fitBounds: FitBounds
diff --git a/packages/core/src/utils/changes.ts b/packages/core/src/utils/changes.ts
index f2c01b7f1..1958bb6a7 100644
--- a/packages/core/src/utils/changes.ts
+++ b/packages/core/src/utils/changes.ts
@@ -5,14 +5,12 @@ import type {
   EdgeRemoveChange,
   EdgeSelectionChange,
   ElementChange,
-  FlowElement,
   GraphEdge,
   GraphNode,
   NodeAddChange,
   NodeChange,
   NodeRemoveChange,
   NodeSelectionChange,
-  StyleFunc,
   Styles,
 } from '../types'
 import { isGraphNode } from '.'
@@ -25,9 +23,7 @@ function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
     if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
       let parentStyles: Styles = {}
 
-      if (typeof parent.style === 'function') {
-        parentStyles = { ...parent.style(parent) }
-      } else if (parent.style) {
+      if (parent.style) {
         parentStyles = { ...parent.style }
       }
 
@@ -80,30 +76,16 @@ function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
         updateItem.position.y = 0
       }
 
-      parent.dimensions.width = Number(parentStyles.width.toString().replace('px', ''))
-      parent.dimensions.height = Number(parentStyles.height.toString().replace('px', ''))
-
-      if (typeof parent.style === 'function') {
-        parent.style = (p) => {
-          const styleFunc = parent.style as StyleFunc
-
-          return {
-            ...styleFunc(p),
-            ...parentStyles,
-          }
-        }
-      } else {
-        parent.style = {
-          ...parent.style,
-          ...parentStyles,
-        }
+      parent.style = {
+        ...parent.style,
+        ...parentStyles,
       }
     }
   }
 }
 
 export function applyChanges<
-  T extends FlowElement = FlowElement,
+  T extends GraphNode | GraphEdge = GraphNode | GraphEdge,
   C extends ElementChange = T extends GraphNode ? NodeChange : EdgeChange,
 >(changes: C[], elements: T[]): T[] {
   const addRemoveChanges = changes.filter((c) => c.type === 'add' || c.type === 'remove') as (
diff --git a/packages/core/src/utils/drag.ts b/packages/core/src/utils/drag.ts
index ccc107f2f..64366b33a 100644
--- a/packages/core/src/utils/drag.ts
+++ b/packages/core/src/utils/drag.ts
@@ -31,14 +31,14 @@ export function getDragItems(
   nodes: GraphNode[],
   nodesDraggable: boolean,
   mousePos: XYPosition,
-  findNode: Actions['findNode'],
+  getNode: Actions['getNode'],
   nodeId?: string,
 ): NodeDragItem[] {
   const dragItems: NodeDragItem[] = []
   for (const node of nodes) {
     if (
       (node.selected || node.id === nodeId) &&
-      (!node.parentNode || !isParentSelected(node, findNode)) &&
+      (!node.parentNode || !isParentSelected(node, getNode)) &&
       (node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'))
     ) {
       dragItems.push(
@@ -65,15 +65,15 @@ export function getDragItems(
 export function getEventHandlerParams({
   id,
   dragItems,
-  findNode,
+  getNode,
 }: {
   id?: string
   dragItems: NodeDragItem[]
-  findNode: Actions['findNode']
+  getNode: Actions['getNode']
 }): [GraphNode, GraphNode[]] {
   const extendedDragItems: GraphNode[] = []
   for (const dragItem of dragItems) {
-    const node = findNode(dragItem.id)
+    const node = getNode(dragItem.id)
 
     if (node) {
       extendedDragItems.push(node)
diff --git a/packages/core/src/utils/edge.ts b/packages/core/src/utils/edge.ts
index b95e53d97..6e33063f2 100644
--- a/packages/core/src/utils/edge.ts
+++ b/packages/core/src/utils/edge.ts
@@ -96,12 +96,12 @@ export function isEdgeVisible({
   return overlappingArea > 0
 }
 
-export function getEdgeZIndex(edge: GraphEdge, findNode: Actions['findNode'], elevateEdgesOnSelect = false) {
+export function getEdgeZIndex(edge: GraphEdge, getNode: Actions['getNode'], elevateEdgesOnSelect = false) {
   const hasZIndex = typeof edge.zIndex === 'number'
   let z = hasZIndex ? edge.zIndex! : 0
 
-  const source = findNode(edge.source)
-  const target = findNode(edge.target)
+  const source = getNode(edge.source)
+  const target = getNode(edge.target)
 
   if (!source || !target) {
     return 0
diff --git a/packages/core/src/utils/errors.ts b/packages/core/src/utils/errors.ts
index 262a1b50e..a40d70633 100644
--- a/packages/core/src/utils/errors.ts
+++ b/packages/core/src/utils/errors.ts
@@ -14,9 +14,6 @@ export enum ErrorCode {
   EDGE_SOURCE_TARGET_SAME = 'EDGE_SOURCE_TARGET_SAME',
   EDGE_SOURCE_TARGET_MISSING = 'EDGE_SOURCE_TARGET_MISSING',
   EDGE_ORPHANED = 'EDGE_ORPHANED',
-
-  // deprecation errors
-  USEVUEFLOW_OPTIONS = 'USEVUEFLOW_OPTIONS',
 }
 
 const messages = {
@@ -39,10 +36,6 @@ const messages = {
   [ErrorCode.EDGE_ORPHANED]: (id: string) =>
     `Edge was orphaned (suddenly missing source or target) and has been removed\nEdge: ${id}`,
   [ErrorCode.EDGE_NOT_FOUND]: (id: string) => `Edge not found\nEdge: ${id}`,
-
-  // deprecation errors
-  [ErrorCode.USEVUEFLOW_OPTIONS]: () =>
-    `The options parameter is deprecated and will be removed in the next major version. Please use the id parameter instead`,
 } as const
 
 type ErrorArgs<T extends ErrorCode> = (typeof messages)[T] extends (...args: any[]) => string
diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts
index a3512374e..6dd8a21d2 100644
--- a/packages/core/src/utils/graph.ts
+++ b/packages/core/src/utils/graph.ts
@@ -8,10 +8,8 @@ import type {
   Dimensions,
   Edge,
   EdgeMarkerType,
-  Element,
   ElementData,
   Elements,
-  FlowElements,
   GraphEdge,
   GraphNode,
   MaybeElement,
@@ -121,7 +119,6 @@ export function parseNode(node: Node, existingNode?: GraphNode, parentNode?: str
       y: 0,
     },
     data: isDef(node.data) ? node.data : {},
-    events: markRaw(isDef(node.events) ? node.events : {}),
   } as GraphNode
 
   return Object.assign(existingNode ?? initialState, node, { id: node.id.toString(), parentNode }) as GraphNode
@@ -139,7 +136,6 @@ export function parseEdge(edge: Edge, existingEdge?: GraphEdge, defaultEdgeOptio
     selectable: edge.selectable ?? defaultEdgeOptions?.selectable,
     focusable: edge.focusable ?? defaultEdgeOptions?.focusable,
     data: isDef(edge.data) ? edge.data : {},
-    events: markRaw(isDef(edge.events) ? edge.events : {}),
     label: edge.label ?? '',
     interactionWidth: edge.interactionWidth ?? defaultEdgeOptions?.interactionWidth,
     ...(defaultEdgeOptions ?? {}),
@@ -148,63 +144,36 @@ export function parseEdge(edge: Edge, existingEdge?: GraphEdge, defaultEdgeOptio
   return Object.assign(existingEdge ?? initialState, edge, { id: edge.id.toString() }) as GraphEdge
 }
 
-function getConnectedElements<T extends Node = Node>(
-  nodeOrId: Node | { id: string } | string,
-  nodes: T[],
-  edges: Edge[],
-  dir: 'source' | 'target',
-): T[] {
-  const id = typeof nodeOrId === 'string' ? nodeOrId : nodeOrId.id
-
-  const connectedIds = new Set()
+export function getOutgoers<N extends Node>(nodeOrId: Node | { id: string } | string, nodes: N[], edges: Edge[]): N[] {
+  const nodeId = typeof nodeOrId === 'string' ? nodeOrId : nodeOrId.id
 
-  const origin = dir === 'source' ? 'target' : 'source'
+  const connectedEdges = edges.filter((edge) => edge.source === nodeId)
+  const outgoers: N[] = []
 
-  for (const edge of edges) {
-    if (edge[origin] === id) {
-      connectedIds.add(edge[dir])
+  for (const edge of connectedEdges) {
+    const node = nodes.find((node) => node.id === edge.target)
+    if (node) {
+      outgoers.push(node)
     }
   }
 
-  return nodes.filter((n) => connectedIds.has(n.id))
+  return outgoers
 }
 
-export function getOutgoers<N extends Node>(nodeOrId: Node | { id: string } | string, nodes: N[], edges: Edge[]): N[]
-export function getOutgoers<T extends Elements>(
-  nodeOrId: Node | { id: string } | string,
-  elements: T,
-): T extends FlowElements ? GraphNode[] : Node[]
-export function getOutgoers(...args: any[]) {
-  if (args.length === 3) {
-    const [nodeOrId, nodes, edges] = args
-    return getConnectedElements(nodeOrId, nodes, edges, 'target')
-  }
-
-  const [nodeOrId, elements] = args
+export function getIncomers<N extends Node>(nodeOrId: Node | { id: string } | string, nodes: N[], edges: Edge[]): N[] {
   const nodeId = typeof nodeOrId === 'string' ? nodeOrId : nodeOrId.id
 
-  const outgoers = elements.filter((el: Element) => isEdge(el) && el.source === nodeId)
-
-  return outgoers.map((edge: Edge) => elements.find((el: Element) => isNode(el) && el.id === edge.target))
-}
+  const connectEdges = edges.filter((edge) => edge.target === nodeId)
+  const incomers: N[] = []
 
-export function getIncomers<N extends Node>(nodeOrId: Node | { id: string } | string, nodes: N[], edges: Edge[]): N[]
-export function getIncomers<T extends Elements>(
-  nodeOrId: Node | { id: string } | string,
-  elements: T,
-): T extends FlowElements ? GraphNode[] : Node[]
-export function getIncomers(...args: any[]) {
-  if (args.length === 3) {
-    const [nodeOrId, nodes, edges] = args
-    return getConnectedElements(nodeOrId, nodes, edges, 'source')
+  for (const edge of connectEdges) {
+    const node = nodes.find((node) => node.id === edge.source)
+    if (node) {
+      incomers.push(node)
+    }
   }
 
-  const [nodeOrId, elements] = args
-  const nodeId = typeof nodeOrId === 'string' ? nodeOrId : nodeOrId.id
-
-  const incomers = elements.filter((el: Element) => isEdge(el) && el.target === nodeId)
-
-  return incomers.map((edge: Edge) => elements.find((el: Element) => isNode(el) && el.id === edge.source))
+  return incomers
 }
 
 export function getEdgeId({ source, sourceHandle, target, targetHandle }: Connection) {
@@ -411,12 +380,12 @@ export function getXYZPos(parentPos: XYZPosition, computedPosition: XYZPosition)
   }
 }
 
-export function isParentSelected(node: GraphNode, findNode: Actions['findNode']): boolean {
+export function isParentSelected(node: GraphNode, getNode: Actions['getNode']): boolean {
   if (!node.parentNode) {
     return false
   }
 
-  const parent = findNode(node.parentNode)
+  const parent = getNode(node.parentNode)
   if (!parent) {
     return false
   }
@@ -425,7 +394,7 @@ export function isParentSelected(node: GraphNode, findNode: Actions['findNode'])
     return true
   }
 
-  return isParentSelected(parent, findNode)
+  return isParentSelected(parent, getNode)
 }
 
 export function getMarkerId(marker: EdgeMarkerType | undefined, vueFlowId?: string) {
diff --git a/packages/core/src/utils/handle.ts b/packages/core/src/utils/handle.ts
index c28e38242..0d3559016 100644
--- a/packages/core/src/utils/handle.ts
+++ b/packages/core/src/utils/handle.ts
@@ -152,7 +152,7 @@ export function isValidHandle(
   doc: Document | ShadowRoot,
   edges: GraphEdge[],
   nodes: GraphNode[],
-  findNode: Actions['findNode'],
+  getNode: Actions['getNode'],
 ) {
   const isTarget = fromType === 'target'
 
@@ -197,8 +197,8 @@ export function isValidHandle(
       result.isValid = isValidConnection(connection, {
         edges,
         nodes,
-        sourceNode: findNode(connection.source)!,
-        targetNode: findNode(connection.target)!,
+        sourceNode: getNode(connection.source)!,
+        targetNode: getNode(connection.target)!,
       })
 
       result.endHandle = {
diff --git a/packages/core/src/utils/storage.ts b/packages/core/src/utils/storage.ts
index 0da844ab7..9b0b25e6b 100644
--- a/packages/core/src/utils/storage.ts
+++ b/packages/core/src/utils/storage.ts
@@ -1,6 +1,6 @@
 import { toRefs } from '@vueuse/core'
 import { computed, getCurrentInstance, reactive } from 'vue'
-import type { FlowOptions, GraphEdge, GraphNode, VueFlowStore } from '../types'
+import type { GraphEdge, GraphNode, VueFlowStore } from '../types'
 import { useActions, useGetters, useState } from '../store'
 
 /**
@@ -40,7 +40,7 @@ export class Storage {
     return this.flows.delete(id)
   }
 
-  public create(id: string, preloadedState?: FlowOptions): VueFlowStore {
+  public create(id: string): VueFlowStore {
     const state = useState()
 
     const reactiveState = reactive(state)
@@ -76,11 +76,11 @@ export class Storage {
       return edgesMap
     })
 
-    const getters = useGetters(reactiveState, nodeLookup, edgeLookup)
+    const getters = useGetters(reactiveState, nodeLookup)
 
     const actions = useActions(reactiveState, nodeLookup, edgeLookup)
 
-    actions.setState({ ...reactiveState, ...preloadedState })
+    actions.setState(reactiveState)
 
     const flow: VueFlowStore = {
       ...hooksOn,
diff --git a/packages/core/src/utils/store.ts b/packages/core/src/utils/store.ts
index 2cb7a8667..f62278688 100644
--- a/packages/core/src/utils/store.ts
+++ b/packages/core/src/utils/store.ts
@@ -57,7 +57,7 @@ export function updateEdgeAction(
   edge: GraphEdge,
   newConnection: Connection,
   edges: GraphEdge[],
-  findEdge: Actions['findEdge'],
+  getEdge: Actions['getEdge'],
   shouldReplaceId: boolean,
   triggerError: State['hooks']['error']['trigger'],
 ) {
@@ -66,7 +66,7 @@ export function updateEdgeAction(
     return false
   }
 
-  const foundEdge = findEdge(edge.id)
+  const foundEdge = getEdge(edge.id)
 
   if (!foundEdge) {
     triggerError(new VueFlowError(ErrorCode.EDGE_NOT_FOUND, edge.id))
@@ -89,7 +89,7 @@ export function updateEdgeAction(
   return newEdge
 }
 
-export function createGraphNodes(nodes: Node[], findNode: Actions['findNode'], triggerError: State['hooks']['error']['trigger']) {
+export function createGraphNodes(nodes: Node[], getNode: Actions['getNode'], triggerError: State['hooks']['error']['trigger']) {
   const parentNodes: Record<string, true> = {}
 
   const nextNodes: GraphNode[] = []
@@ -103,7 +103,7 @@ export function createGraphNodes(nodes: Node[], findNode: Actions['findNode'], t
       continue
     }
 
-    const parsed = parseNode(node, findNode(node.id), node.parentNode)
+    const parsed = parseNode(node, getNode(node.id), node.parentNode)
 
     if (node.parentNode) {
       parentNodes[node.parentNode] = true
@@ -113,7 +113,7 @@ export function createGraphNodes(nodes: Node[], findNode: Actions['findNode'], t
   }
 
   for (const node of nextNodes) {
-    const parentNode = findNode(node.parentNode) || nextNodes.find((n) => n.id === node.parentNode)
+    const parentNode = getNode(node.parentNode!) || nextNodes.find((n) => n.id === node.parentNode)
 
     if (node.parentNode && !parentNode) {
       triggerError(new VueFlowError(ErrorCode.NODE_MISSING_PARENT, node.id, node.parentNode))
@@ -209,8 +209,8 @@ export function areConnectionMapsEqual(a?: Map<string, Connection>, b?: Map<stri
 export function createGraphEdges(
   nextEdges: (Edge | Connection)[],
   isValidConnection: ValidConnectionFunc | null,
-  findNode: Actions['findNode'],
-  findEdge: Actions['findEdge'],
+  getNode: Actions['getNode'],
+  getEdge: Actions['getEdge'],
   onError: VueFlowStore['emits']['error'],
   defaultEdgeOptions: DefaultEdgeOptions | undefined,
   nodes: GraphNode[],
@@ -227,8 +227,8 @@ export function createGraphEdges(
       continue
     }
 
-    const sourceNode = findNode(edge.source)
-    const targetNode = findNode(edge.target)
+    const sourceNode = getNode(edge.source)
+    const targetNode = getNode(edge.target)
 
     if (!sourceNode || !targetNode) {
       onError(new VueFlowError(ErrorCode.EDGE_SOURCE_TARGET_MISSING, edge.id, edge.source, edge.target))
@@ -259,13 +259,9 @@ export function createGraphEdges(
       }
     }
 
-    const existingEdge = findEdge(edge.id)
+    const existingEdge = getEdge(edge.id)
 
-    validEdges.push({
-      ...parseEdge(edge, existingEdge, defaultEdgeOptions),
-      sourceNode,
-      targetNode,
-    })
+    validEdges.push(parseEdge(edge, existingEdge, defaultEdgeOptions))
   }
 
   return validEdges
diff --git a/packages/node-toolbar/src/NodeToolbar.vue b/packages/node-toolbar/src/NodeToolbar.vue
index 518737852..81af0301e 100644
--- a/packages/node-toolbar/src/NodeToolbar.vue
+++ b/packages/node-toolbar/src/NodeToolbar.vue
@@ -14,13 +14,13 @@ const props = withDefaults(defineProps<NodeToolbarProps>(), {
 
 const contextNodeId = inject(NodeIdInjection, null)
 
-const { viewportRef, viewport, getSelectedNodes, findNode } = useVueFlow()
+const { viewportRef, viewport, getSelectedNodes, getNode } = useVueFlow()
 
 const nodes = computed(() => {
   const nodeIds = Array.isArray(props.nodeId) ? props.nodeId : [props.nodeId || contextNodeId || '']
 
   return nodeIds.reduce<GraphNode[]>((acc, id) => {
-    const node = findNode(id)
+    const node = getNode(id)
 
     if (node) {
       acc.push(node)