From 6c06eeee7498c17e8d6591c736bac33b2fc858f2 Mon Sep 17 00:00:00 2001
From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 26 May 2022 21:35:30 +0200
Subject: [PATCH] docs: update nested example

---
 docs/components/examples/nested/App.vue       |  2 ++
 .../container/EdgeRenderer/EdgeRenderer.vue   | 32 ++++++++++---------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/docs/components/examples/nested/App.vue b/docs/components/examples/nested/App.vue
index 8c149570..f328341e 100644
--- a/docs/components/examples/nested/App.vue
+++ b/docs/components/examples/nested/App.vue
@@ -5,6 +5,8 @@ import { onMounted } from 'vue'
 const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
   fitViewOnInit: true,
   connectionMode: ConnectionMode.Loose,
+  // set this to true so edges get elevated when selected, defaults to false
+  elevateEdgesOnSelect: true,
   nodes: [
     { id: '1', type: 'input', label: 'node', position: { x: 250, y: 0 } },
     {
diff --git a/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue b/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue
index a3820166..b5eab602 100644
--- a/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue
@@ -57,25 +57,27 @@ const connectionLineVisible = $(
 
 let groups = $ref<ReturnType<typeof groupEdgesByZLevel>>([])
 
-onPaneReady(() => {
-  const stop = watch(
-    [$$(elevateEdgesOnSelect), $$(getSelectedNodes), $$(getEdges), $$(getNodes)],
-    () => {
-      if (elevateEdgesOnSelect) {
-        nextTick(() => (groups = groupEdgesByZLevel(getEdges, getNode)))
-      }
-    },
-    {
-      flush: 'post',
-      immediate: true,
-    },
-  )
+const scope = effectScope()
 
-  onBeforeUnmount(() => {
-    stop()
+onPaneReady(() => {
+  scope.run(() => {
+    watch(
+      [$$(getSelectedNodes), $$(getEdges), $$(getNodes)],
+      () => {
+        if (elevateEdgesOnSelect) {
+          nextTick(() => (groups = groupEdgesByZLevel(getEdges, getNode)))
+        }
+      },
+      {
+        flush: 'post',
+        immediate: true,
+      },
+    )
   })
 })
 
+onBeforeUnmount(() => scope.stop())
+
 const getType = (type?: string, template?: GraphEdge['template']) => {
   const name = type || 'default'
   let edgeType = template ?? getEdgeTypes[name]