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,9 +57,12 @@ const connectionLineVisible = $(
 
 let groups = $ref<ReturnType<typeof groupEdgesByZLevel>>([])
 
+const scope = effectScope()
+
 onPaneReady(() => {
-  const stop = watch(
+  scope.run(() => {
-    [$$(elevateEdgesOnSelect), $$(getSelectedNodes), $$(getEdges), $$(getNodes)],
+    watch(
+      [$$(getSelectedNodes), $$(getEdges), $$(getNodes)],
       () => {
         if (elevateEdgesOnSelect) {
           nextTick(() => (groups = groupEdgesByZLevel(getEdges, getNode)))
@@ -70,12 +73,11 @@ onPaneReady(() => {
         immediate: true,
       },
     )
-
-  onBeforeUnmount(() => {
-    stop()
   })
 })
 
+onBeforeUnmount(() => scope.stop())
+
 const getType = (type?: string, template?: GraphEdge['template']) => {
   const name = type || 'default'
   let edgeType = template ?? getEdgeTypes[name]