fix(flow): props not being watched on time

* updated example for UpdateNode

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

examples/UpdateNode/UpdateNodeExample.vue

@@ -10,9 +10,11 @@ const initialElements: Elements = [
 ]
 
 const elements = ref<Elements>(initialElements)
-const nodeName = ref<string>('Node 1')
+const opts = ref({
-const nodeBg = ref<string>('#eee')
+  bg: '#eee',
-const nodeHidden = ref<boolean>(false)
+  name: 'Node 1',
+  hidden: false,
+})
 
 const updateNode = () => {
   elements.value = elements.value.map((el) => {
@@ -20,29 +22,30 @@ const updateNode = () => {
       // it's important that you create a new object here in order to notify react flow about the change
       el.data = {
         ...el.data,
-        label: nodeName.value,
+        label: opts.value.name,
       }
-      el.style = { backgroundColor: nodeBg.value }
+      el.style = { backgroundColor: opts.value.bg }
-      el.isHidden = nodeHidden.value
+      el.isHidden = opts.value.hidden
     }
 
     return el
   })
 }
+
 onMounted(updateNode)
 </script>
 <template>
   <VueFlow v-model="elements" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
     <div class="updatenode__controls">
       <label>label:</label>
-      <input v-model="nodeName" @input="updateNode" />
+      <input v-model="opts.name" @input="updateNode" />
 
       <label class="updatenode__bglabel">background:</label>
-      <input v-model="nodeBg" type="color" @input="updateNode" />
+      <input v-model="opts.bg" type="color" @input="updateNode" />
 
       <div class="updatenode__checkboxwrapper">
         <label>hidden:</label>
-        <input v-model="nodeHidden" type="checkbox" @input="updateNode" />
+        <input v-model="opts.hidden" type="checkbox" @change="updateNode" />
       </div>
     </div>
   </VueFlow>

src/container/VueFlow/VueFlow.vue

@@ -108,15 +108,12 @@ const props = withDefaults(defineProps<FlowProps>(), {
 const store = initFlow(emit, typeof props.storageKey === 'string' ? props.storageKey : props.id)
 const elements = useVModel(props, 'modelValue', emit)
 
-// if there are preloaded elements we overwrite the current elements with the stored ones
-if (store.elements.length) elements.value = store.elements
-
 const options = Object.assign({}, store.$state, props)
 
 invoke(async () => {
   store.setState(options)
-  await store.setElements(elements.value)
+  // if there are preloaded elements we overwrite the current elements with the stored ones
-  elements.value = store.elements
+  await store.setElements(store.elements.length ? store.elements : elements.value)
   store.isReady = true
 
   // if ssr we can't wait for dimensions, they'll never really exist
@@ -137,27 +134,28 @@ invoke(async () => {
   }
   store.hooks.load.trigger(instance)
   store.instance = instance
-  watch(
-    () => props,
-    () => store.setState(props),
-    { flush: 'post', deep: true },
-  )
-  watch(
-    () => props.modelValue.length,
-    () => store.setElements(elements.value),
-  )
-  const { pause, resume } = pausableWatch(elements, store.setElements, { flush: 'post' })
-  watch(
-    () => store.elements,
-    (val) => {
-      pause()
-      elements.value = val
-      nextTick(resume)
-    },
-    { flush: 'post', deep: true },
-  )
 })
 
+watch(
+  () => props,
+  () => store.setState(props),
+  { flush: 'post', deep: true },
+)
+watch(
+  () => props.modelValue.length,
+  () => store.setElements(elements.value),
+)
+const { pause, resume } = pausableWatch(elements, store.setElements, { flush: 'post' })
+watch(
+  () => store.elements,
+  (val) => {
+    pause()
+    elements.value = val
+    nextTick(resume)
+  },
+  { flush: 'post', deep: true },
+)
+
 const transitionName = computed(() => {
   let name = ''
   if (typeof store.loading === 'object' && store.loading.transition) {