update(nodes): watch nodes width for dimension update

* add force param to setElements, if set we clear the elements arr (default true)
* wait for store watcher until store is ready (i.e. a state has been set)
* move renderer css class to Renderer.vue

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

src/container/VueFlow/VueFlow.vue

@@ -116,19 +116,22 @@ const { pause: pauseModel, resume: resumeModel } = pausableWatch(
   async () => await store.setElements(elements.value),
 )
 const { pause, resume } = pausableWatch(elements, async (val) => await store.setElements(val), { flush: 'post' })
-watch(
-  () => store.elements,
-  (val) => {
-    pause()
-    pauseModel()
-    elements.value = val
-    setTimeout(() => {
-      resume()
-      resumeModel()
-    }, 1)
-  },
-  { flush: 'post', deep: true },
-)
+
+until(() => store.isReady).toBe(true).then(() => {
+  watch(
+    () => store.elements,
+    (val) => {
+      pause()
+      pauseModel()
+      elements.value = val
+      setTimeout(() => {
+        resume()
+        resumeModel()
+      }, 1)
+    },
+    { flush: 'post', deep: true },
+  )
+})
 
 const transitionName = computed(() => {
   let name = ''
@@ -149,9 +152,9 @@ export default {
 <template>
   <div class="vue-flow">
     <Transition :key="`vue-flow-transition-${store.$id}`" :name="transitionName">
-      <Suspense>
+      <Suspense timeout="0">
         <template #default>
-          <Renderer :elements="elements">
+          <Renderer :key="`renderer-${store.$id}`" :elements="elements">
             <ZoomPane
               :key="`zoom-pane-${store.$id}`"
               :prevent-scrolling="store.preventScrolling"