chore(nodes): use scope for node watchers

packages/vue-flow/src/components/Nodes/NodeWrapper.vue

@@ -37,6 +37,8 @@ const nodeElement = ref()
 
 const { emit, on } = useNodeHooks(node)
 
+const scope = effectScope()
+
 const dragging = useDrag({
   id,
   el: nodeElement,
@@ -60,14 +62,6 @@ const observer = useResizeObserver(
   { box: 'content-box' },
 )
 
-watch(
-  [() => node.width, () => node.height, () => node.type, () => node.sourcePosition, () => node.targetPosition],
-  () => {
-    updateNodeDimensions([{ id, nodeElement: nodeElement.value }])
-  },
-  { flush: 'post' },
-)
-
 const updatePosition = (nodePos: XYZPosition, parentPos?: XYZPosition) => {
   if (parentPos) {
     node.computedPosition = getXYZPos({ x: parentPos.x, y: parentPos.y, z: parentPos.z! }, nodePos)
@@ -91,35 +85,46 @@ onUpdateNodeInternals((updateIds) => {
   }
 })
 
-onBeforeUnmount(() => observer.stop())
-
 onMounted(() => {
-  updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }])
+  scope.run(() => {
+    watch(
+      [() => node.width, () => node.height, () => node.type, () => node.sourcePosition, () => node.targetPosition],
+      () => {
+        updateNodeDimensions([{ id, nodeElement: nodeElement.value }])
+      },
+      { immediate: true, flush: 'post' },
+    )
 
-  watch(
+    watch(
-    [
+      [
-      () => node.position.x,
+        () => node.position.x,
-      () => node.position.y,
+        () => node.position.y,
-      () => parentNode?.computedPosition.x,
+        () => parentNode?.computedPosition.x,
-      () => parentNode?.computedPosition.y,
+        () => parentNode?.computedPosition.y,
-      () => parentNode?.computedPosition.z,
+        () => parentNode?.computedPosition.z,
-      () => node.selected,
+        () => node.selected,
-      () => node.dimensions,
+        () => node.dimensions,
-      () => parentNode?.dimensions,
+        () => parentNode?.dimensions,
-    ],
+      ],
-    ([newX, newY, parentX, parentY, parentZ]) => {
+      ([newX, newY, parentX, parentY, parentZ]) => {
-      const xyzPos = {
+        const xyzPos = {
-        x: newX,
+          x: newX,
-        y: newY,
+          y: newY,
-        z: node.selected ? 1000 : 0,
+          z: node.selected ? 1000 : 0,
-      }
+        }
 
-      updatePosition(xyzPos, parentX && parentY ? { x: parentX, y: parentY, z: parentZ! } : undefined)
+        updatePosition(xyzPos, parentX && parentY ? { x: parentX, y: parentY, z: parentZ! } : undefined)
 
-      node.handleBounds = getHandleBounds(nodeElement.value, viewport.zoom)
+        node.handleBounds = getHandleBounds(nodeElement.value, viewport.zoom)
-    },
+      },
-    { immediate: true, flush: 'post' },
+      { immediate: true, flush: 'post' },
-  )
+    )
+  })
+})
+
+onBeforeUnmount(() => {
+  observer.stop()
+  scope.stop()
 })
 
 const onMouseEnter = (event: MouseEvent) => {