From f534572cef3e6759313e16d56e4d47958e30e94a Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 19 Nov 2021 02:13:47 +0100
Subject: [PATCH] fix!: v-model implemented again

* fix store usage

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 examples/RGBFlow/RGBFlow.vue      |  2 +-
 src/container/VueFlow/VueFlow.vue | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/examples/RGBFlow/RGBFlow.vue b/examples/RGBFlow/RGBFlow.vue
index 15c74aa6..8169cd9e 100644
--- a/examples/RGBFlow/RGBFlow.vue
+++ b/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,
diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue
index 6983d87d..1e3e45d7 100644
--- a/src/container/VueFlow/VueFlow.vue
+++ b/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) => {