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,10 +85,15 @@ 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(
       [
@@ -121,6 +120,12 @@ onMounted(() => {
       { immediate: true, flush: 'post' },
     )
   })
+})
+
+onBeforeUnmount(() => {
+  observer.stop()
+  scope.stop()
+})
 
 const onMouseEnter = (event: MouseEvent) => {
   if (!dragging) {