fix: onLoad being triggered when elements aren't ready

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/container/VueFlow/VueFlow.vue

@@ -126,28 +126,26 @@ const init = (state: FlowState) => {
 }
 onBeforeUnmount(() => store?.$dispose())
 
-onMounted(() => {
-  init(options)
-  watch(elements, (val) => store.setElements(val), { flush: 'post', deep: true })
-  watch(
-    () => store.elements,
-    (val, oldVal) => {
-      nextTick(() => {
-        const hasDiff = diff(val, oldVal)
-        if (hasDiff.length > 0) elements.value = val
-      })
-    },
-    { flush: 'post', deep: true },
-  )
-  watch(
-    () => props,
-    (val, oldVal) => {
+init(options)
+watch(elements, (val) => store.setElements(val), { flush: 'post', deep: true })
+watch(
+  () => store.elements,
+  (val, oldVal) => {
+    nextTick(() => {
       const hasDiff = diff(val, oldVal)
-      if (hasDiff.length > 0) init({ ...store.$state, ...val } as FlowState)
-    },
-    { flush: 'pre', deep: true },
-  )
-})
+      if (hasDiff.length > 0) elements.value = val
+    })
+  },
+  { flush: 'post', deep: true },
+)
+watch(
+  () => props,
+  (val, oldVal) => {
+    const hasDiff = diff(val, oldVal)
+    if (hasDiff.length > 0) init({ ...store.$state, ...val } as FlowState)
+  },
+  { flush: 'pre', deep: true },
+)
 </script>
 <template>
   <div class="vue-flow">

src/container/ZoomPane/ZoomPane.vue

@@ -185,6 +185,7 @@ store.dimensions = {
 
 invoke(async () => {
   await until(() => !isNaN(width.value) && width.value > 0 && !isNaN(height.value) && height.value > 0).toBeTruthy()
+  await until(store.elements).toMatch((y) => y.length > 0)
   const instance: FlowInstance = {
     fitView: (params = { padding: 0.1 }) => fitView(params),
     zoomIn,