fix!: v-model implemented again

* fix store usage

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

examples/RGBFlow/RGBFlow.vue

@@ -30,7 +30,7 @@ const color = ref<Colors>({
   blue: 100,
 })
 const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val))
-const { store } = useVueFlow({
+const store = useVueFlow({
   nodeTypes: {
     'rgb': true,
     'rgb-output': true,

src/container/VueFlow/VueFlow.vue

@@ -103,7 +103,6 @@ const emit = defineEmits(Object.keys(createHooks()))
 
 const { store, hooks } = initFlow(emit, props)
 const init = (opts: typeof props) => {
-  store.elements = opts.elements
   for (const opt of Object.keys(opts)) {
     const val = opts[opt as keyof FlowProps]
     if (val && typeof val !== 'undefined') (store.$state as any)[opt] = val
@@ -116,6 +115,18 @@ const init = (opts: typeof props) => {
 }
 onBeforeUnmount(() => store?.$dispose())
 
+const elements = useVModel(props, 'elements', emit)
+watch(
+  elements,
+  (val, oldVal) => {
+    nextTick(() => {
+      const hasDiff = diff(val, oldVal)
+      if (hasDiff.length > 0) store.setElements(val)
+    })
+  },
+  { flush: 'post', deep: true },
+)
+
 watch(
   () => props,
   (val, oldVal) => {