docs: update nested example

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 } },
     {

packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue

@@ -57,25 +57,27 @@ const connectionLineVisible = $(
 
 let groups = $ref<ReturnType<typeof groupEdgesByZLevel>>([])
 
-onPaneReady(() => {
+const scope = effectScope()
-  const stop = watch(
-    [$$(elevateEdgesOnSelect), $$(getSelectedNodes), $$(getEdges), $$(getNodes)],
-    () => {
-      if (elevateEdgesOnSelect) {
-        nextTick(() => (groups = groupEdgesByZLevel(getEdges, getNode)))
-      }
-    },
-    {
-      flush: 'post',
-      immediate: true,
-    },
-  )
 
-  onBeforeUnmount(() => {
+onPaneReady(() => {
-    stop()
+  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]