fix(viewpane,nodes): move resize observer to mounted hooks

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

@@ -23,7 +23,10 @@ const draggable = (d?: boolean) => (typeof d === 'undefined' ? nodesDraggable :
 const selectable = (s?: boolean) => (typeof s === 'undefined' ? elementsSelectable : s)
 const connectable = (c?: boolean) => (typeof c === 'undefined' ? nodesConnectable : c)
 
-const resizeObserver = new ResizeObserver((entries) => {
+const resizeObserver = ref<ResizeObserver>()
+
+onMounted(() => {
+  resizeObserver.value = new ResizeObserver((entries) => {
     const updates = entries.map((entry: ResizeObserverEntry) => ({
       id: entry.target.getAttribute('data-id') as string,
       nodeElement: entry.target as HTMLDivElement,
@@ -31,11 +34,10 @@ const resizeObserver = new ResizeObserver((entries) => {
     }))
 
     updateNodeDimensions(updates)
+  })
 })
 
-onBeforeUnmount(() => {
+onBeforeUnmount(() => resizeObserver.value?.disconnect())
-  resizeObserver.disconnect()
-})
 
 const getType = (type?: string, template?: GraphNode['template']) => {
   const name = type || 'default'
@@ -70,6 +72,7 @@ export default {
 
 <template>
   <div class="vue-flow__nodes vue-flow__container">
+    <template v-if="resizeObserver">
       <NodeWrapper
         v-for="node of getNodes"
         :id="node.id"
@@ -82,5 +85,6 @@ export default {
         :connectable="connectable(node.connectable)"
         :node="node"
       />
+    </template>
   </div>
 </template>

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

@@ -57,21 +57,23 @@ let transform = $ref({
   zoom: clampedZoom,
 })
 
-useResizeObserver(viewportEl, (ev) => {
+onMounted(() => {
-  if (!ev[0].target) return
+  useResizeObserver(viewportEl, () => {
-
-  const { width, height } = getDimensions(ev[0].target as HTMLDivElement)
-  dimensions.width = width
-  dimensions.height = height
-})
-
-const window = useWindow()
-useEventListener(window, 'resize', () => {
     if (!viewportEl.value) return
 
     const { width, height } = getDimensions(viewportEl.value)
     dimensions.width = width
     dimensions.height = height
+  })
+
+  const window = useWindow()
+  useEventListener(window, 'resize', () => {
+    if (!viewportEl.value) return
+
+    const { width, height } = getDimensions(viewportEl.value)
+    dimensions.width = width
+    dimensions.height = height
+  })
 })
 
 onMounted(() => {