From 034885062c94edc148ddc8dcfbecf5d6f59015c3 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 3 Feb 2024 20:11:01 +0100
Subject: [PATCH] chore(docs): update multi example

---
 docs/examples/multi/Flow.vue | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/docs/examples/multi/Flow.vue b/docs/examples/multi/Flow.vue
index a235ac8c..09c440b8 100644
--- a/docs/examples/multi/Flow.vue
+++ b/docs/examples/multi/Flow.vue
@@ -1,35 +1,45 @@
 <script setup>
-import { Background } from '@vue-flow/background'
-import { Panel, VueFlow, isNode } from '@vue-flow/core'
 import { ref } from 'vue'
+import { Background } from '@vue-flow/background'
+import { Panel, VueFlow } from '@vue-flow/core'
 
-const elements = ref([
+const nodes = ref([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
   { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
   { id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
   { id: '4', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
-  { id: 'e1-2', source: '1', target: '2', animated: true },
+])
+
+const edges = ref([
+  { id: 'e1-2', source: '1', target: '2' },
   { id: 'e1-3', source: '1', target: '3' },
+  { id: 'e3-4', source: '3', target: '4' },
 ])
 
 function toggleClass() {
-  return elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
+  nodes.value = nodes.value.map((node) => {
+    return {
+      ...node,
+      class: node.class === 'light' ? 'dark' : 'light',
+    }
+  })
 }
 
 function updatePos() {
-  return elements.value.forEach((el) => {
-    if (isNode(el)) {
-      el.position = {
+  nodes.value = nodes.value.map((node) => {
+    return {
+      ...node,
+      position: {
         x: Math.random() * 400,
         y: Math.random() * 400,
-      }
+      },
     }
   })
 }
 </script>
 
 <template>
-  <VueFlow v-model="elements" fit-view-on-init>
+  <VueFlow :nodes="nodes" :edges="edges" fit-view-on-init>
     <Background />
 
     <Panel position="top-right">