From 54eef97bde2e3685c18cb6eb42e242e7ca187ef3 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 27 Jul 2022 21:02:13 +0200
Subject: [PATCH] fix(edges): create new effect scope when pane ready is called

---
 .../src/container/EdgeRenderer/EdgeRenderer.vue       | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue b/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue
index af621809..cc304729 100644
--- a/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { CSSProperties } from 'vue'
+import type { CSSProperties, EffectScope } from 'vue'
 import EdgeWrapper from '../../components/Edges/Wrapper'
 import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
 import { useEdgeHooks, useHandle, useVueFlow } from '../../composables'
@@ -58,9 +58,11 @@ const hooks = $ref<Record<string, ReturnType<typeof useEdgeHooks>>>({})
 
 let groups = $ref<ReturnType<typeof groupEdgesByZLevel>>([])
 
-const scope = effectScope()
+let scope: EffectScope | null = effectScope()
 
 onPaneReady(() => {
+  if (!scope) scope = effectScope()
+
   scope.run(() => {
     const edgeAmount = computed(() => getEdges.length)
 
@@ -92,7 +94,10 @@ onPaneReady(() => {
   })
 })
 
-onBeforeUnmount(() => scope.stop())
+onBeforeUnmount(() => {
+  scope?.stop()
+  scope = null
+})
 
 const getType = (type?: string, template?: GraphEdge['template']) => {
   const name = type || 'default'