diff --git a/package/src/composables/useVueFlow.ts b/package/src/composables/useVueFlow.ts
index a1177290..92e28c8f 100644
--- a/package/src/composables/useVueFlow.ts
+++ b/package/src/composables/useVueFlow.ts
@@ -126,20 +126,15 @@ export default (options?: Options): VueFlowStore => {
     if (scope) {
       scope.vueFlowId = name
 
-      // dispose of state values and storage entry
-      onScopeDispose(() => {
-        vueFlow?.$reset()
-        storage.remove(name)
-        vueFlow = null
-      })
-
-      if (reactiveOptions) {
-        scope.run(() => {
-          watch(reactiveOptions, (opts) => {
-            vueFlow?.setState(opts)
+      onBeforeMount(() => {
+        if (reactiveOptions) {
+          scope.run(() => {
+            watch(reactiveOptions, (opts) => {
+              vueFlow?.setState(opts)
+            })
           })
-        })
-      }
+        }
+      })
     }
   } else {
     // if composable was called with additional options after initialization, overwrite state with the options values
@@ -154,6 +149,14 @@ export default (options?: Options): VueFlowStore => {
   // always provide a fresh instance into context on call
   if (scope) {
     provide(VueFlow, vueFlow)
+
+    // dispose of state values and storage entry
+    onScopeDispose(() => {
+      if (storage.get(vueFlow!.id)) {
+        storage.remove(vueFlow!.id)
+      }
+      vueFlow = null
+    })
   }
 
   return vueFlow
diff --git a/package/src/container/VueFlow/VueFlow.vue b/package/src/container/VueFlow/VueFlow.vue
index 43682433..000c0429 100644
--- a/package/src/container/VueFlow/VueFlow.vue
+++ b/package/src/container/VueFlow/VueFlow.vue
@@ -32,12 +32,20 @@ const modelValue = useVModel(props, 'modelValue', emit)
 const modelNodes = useVModel(props, 'nodes', emit)
 const modelEdges = useVModel(props, 'edges', emit)
 
-const { id, hooks, getNodeTypes, getEdgeTypes, ...rest } = useVueFlow()
+const { id, hooks, getNodeTypes, getEdgeTypes, $reset, ...rest } = useVueFlow({ id: props.id })
 
-const dispose = useWatch({ modelValue, nodes: modelNodes, edges: modelEdges }, props,{ id, hooks, getNodeTypes, getEdgeTypes, ...rest })
+const dispose = useWatch({ modelValue, nodes: modelNodes, edges: modelEdges }, props, {
+  id,
+  hooks,
+  getNodeTypes,
+  getEdgeTypes,
+  $reset,
+  ...rest,
+})
 
 onUnmounted(() => {
   dispose()
+  $reset()
 })
 
 useHooks(emit, hooks.value)