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,
@@ -32,11 +35,10 @@ const resizeObserver = new ResizeObserver((entries) => {
 
     updateNodeDimensions(updates)
   })
-
-onBeforeUnmount(() => {
-  resizeObserver.disconnect()
 })
 
+onBeforeUnmount(() => resizeObserver.value?.disconnect())
+
 const getType = (type?: string, template?: GraphNode['template']) => {
   const name = type || 'default'
   let nodeType = template ?? getNodeTypes[name]
@@ -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,10 +57,11 @@ let transform = $ref({
   zoom: clampedZoom,
 })
 
-useResizeObserver(viewportEl, (ev) => {
-  if (!ev[0].target) return
+onMounted(() => {
+  useResizeObserver(viewportEl, () => {
+    if (!viewportEl.value) return
 
-  const { width, height } = getDimensions(ev[0].target as HTMLDivElement)
+    const { width, height } = getDimensions(viewportEl.value)
     dimensions.width = width
     dimensions.height = height
   })
@@ -73,6 +74,7 @@ useEventListener(window, 'resize', () => {
     dimensions.width = width
     dimensions.height = height
   })
+})
 
 onMounted(() => {
   const d3Zoom = zoom<HTMLDivElement, any>().scaleExtent([minZoom, maxZoom]).translateExtent(translateExtent)