From 2231ee462604c950f3e7aba1999ec9a1e7b835b7 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 19 Dec 2024 11:10:59 +0100
Subject: [PATCH] docs(guide): add docs section about v-modelling nodes and
 edges

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 docs/src/guide/controlled-flow.md | 35 +++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/docs/src/guide/controlled-flow.md b/docs/src/guide/controlled-flow.md
index 87ec8655..7789a647 100644
--- a/docs/src/guide/controlled-flow.md
+++ b/docs/src/guide/controlled-flow.md
@@ -211,3 +211,38 @@ const onNodesChange = async (changes) => {
   <VueFlow :nodes="nodes" :edges="edges" :apply-default="false" @nodes-change="onNodesChange" />
 </template>
 ```
+
+## V-Model Nodes and Edges
+
+In some cases you want to *sync* the state of internal nodes/edges with your own state,
+for those cases you can use the `v-model` directive to bind the internal state with your own state.
+
+```vue
+<template>
+  <VueFlow v-model:edges="edges" v-model:nodes="nodes" />
+</template>
+```
+
+Doing this will sync the internal state with your own state, which is useful for situations where you update internal nodes and edges but also want those changes to be reflected in your own state.
+
+For example, if you update the type of nodes using `updateNode` and want to see the same change reflected in your own nodes state and not just in the internal state.
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { useVueFlow } from '@vue-flow/core'
+
+const nodes = ref([
+  {
+    id: '1',
+    position: { x: 0, y: 0 },
+    data: { label: 'Node 1' },
+  },
+])
+
+const { updateNode } = useVueFlow()
+
+// using updateNode will only update the internal state, not the nodes state unless you use v-model
+updateNode('1', { type: 'new-type' })
+</script>
+```