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,10 +126,9 @@ const init = (state: FlowState) => {
 }
 onBeforeUnmount(() => store?.$dispose())
 
-onMounted(() => {
+init(options)
-  init(options)
+watch(elements, (val) => store.setElements(val), { flush: 'post', deep: true })
-  watch(elements, (val) => store.setElements(val), { flush: 'post', deep: true })
+watch(
-  watch(
   () => store.elements,
   (val, oldVal) => {
     nextTick(() => {
@@ -138,16 +137,15 @@ onMounted(() => {
     })
   },
   { flush: 'post', deep: true },
-  )
+)
-  watch(
+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,