From 7f2917a752b330cc48dfdba124fb558bf9f96e14 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 13 Jun 2024 23:03:02 +0200
Subject: [PATCH] docs: update state page

---
 docs/src/guide/vue-flow/state.md | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/docs/src/guide/vue-flow/state.md b/docs/src/guide/vue-flow/state.md
index 94641132..745cc167 100644
--- a/docs/src/guide/vue-flow/state.md
+++ b/docs/src/guide/vue-flow/state.md
@@ -42,7 +42,7 @@ Consider this example, where we want to create a Sidebar that allows us to selec
   <div>
     <Sidebar />
     <div class="wrapper">
-      <VueFlow v-model="elements" />
+      <VueFlow :nodes="nodes" :edges="edges" />
     </div>
   </div>
 </template>
@@ -105,9 +105,9 @@ If you want to strictly control state changes you can disable this behavior by s
 to `false`.
 
 ```vue
-<div style="height: 300px">
-  <VueFlow v-model="elements" :apply-default="false" />
-</div>
+<template>
+    <VueFlow :nodes="nodes" :edges="edges" :apply-default="false" />
+</template>
 ```
 
 State changes are emitted by the `onNodesChange` or `onEdgesChange` events, which will provide an array of changes that
@@ -115,6 +115,10 @@ have been triggered.
 To take control of state changes you can implement your own state update handlers or use the state helper functions that
 come with the library to mix it up.
 
+::: info
+Read more about this in the [controlled flow](/guide/controlled-flow) guide.
+:::
+
 ## Access State in Options API
 
 `useVueFlow` was designed to be used in the composition API, __but__ it is still possible to use it in the options API.
@@ -122,7 +126,7 @@ Though it is necessary to pass a unique id for your Vue Flow state instance, oth
 will create a new state instance
 when mounted.
 
-```vue{4,32}
+```vue
 <script>
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 
@@ -131,13 +135,14 @@ export default defineComponent({
   components: { VueFlow },
   data() {
     return {
-      elements: [
+      nodes: [
         {
           id: '1',
-          label: 'Node 1',
           position: { x: 0, y: 0},
+          data: { label: 'Node 1' }
         }
-      ]
+      ],
+      edges: [],
     }
   },
   methods: {
@@ -153,7 +158,8 @@ export default defineComponent({
   }
 })
 </script>
+
 <template>
-  <VueFlow v-model="elements" id="options-api" @connect="handleConnect" />
+  <VueFlow id="options-api" :nodes="nodes" :edges="edges" @connect="handleConnect" />
 </template>
 ```