chore(docs): cleanup v-model usages

docs/src/guide/components/background.md

@@ -19,14 +19,10 @@ To use the background simply pass the `Background` component as a child to the `
 <script setup>
 import { VueFlow } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
-import initialElements from './initial-elements'
-
-// some nodes and edges
-const elements = ref(initialElements)
 </script>
 
 <template>
-  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
+  <VueFlow>
     <Background />
   </VueFlow>
 </template>

docs/src/guide/components/controls.md

@@ -26,16 +26,10 @@ import { Controls } from '@vue-flow/controls'
 
 // import default controls styles
 import '@vue-flow/controls/dist/style.css'
-
-import initialElements from './initial-elements'
-
-
-// some nodes and edges
-const elements = ref(initialElements)
 </script>
 
 <template>
-  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
+  <VueFlow>
     <Controls />
   </VueFlow>
 </template>

docs/src/guide/components/minimap.md

@@ -24,15 +24,10 @@ import { MiniMap } from '@vue-flow/minimap'
 
 // import default minimap styles
 import '@vue-flow/minimap/dist/style.css'
-
-import initialElements from './initial-elements'
-
-// some nodes and edges
-const elements = ref(initialElements)
 </script>
 
 <template>
-  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
+  <VueFlow>
     <MiniMap />
   </VueFlow>
 </template>

docs/src/guide/components/node-resizer.md

@@ -16,17 +16,18 @@ npm install @vue-flow/node-resizer
 
 ```vue
 <script setup>
+import { ref } from 'vue'  
 import { VueFlow } from '@vue-flow/core'
-import initialElements from './initial-elements'
+import initialNodes from './initialNodes'
 
 // some nodes and edges
-const elements = ref(initialElements)
+const nodes = ref(initialNodes)
 </script>
 
 <template>
-  <VueFlow v-model="elements" fit-view-on-init>
+  <VueFlow :nodes="nodes">
     <template #node-custom="nodeProps">
-      <CustomNode :data="nodeProps.data" :label="nodeProps.label" />
+      <CustomNode :data="nodeProps.data"  />
     </template>
   </VueFlow>
 </template>
@@ -40,14 +41,13 @@ import { NodeResizer } from '@vue-flow/node-resizer'
 // make sure to include the necessary styles!
 import '@vue-flow/node-resizer/dist/style.css'
 
-defineProps(['label'])
+defineProps(['data'])
 </script>
 
 <template>
   <NodeResizer min-width="100" min-height="30" />
 
   <Handle type="target" :position="Position.Left" />
-  <div style="padding: 10px">{{ label }}</div>
   <Handle type="source" :position="Position.Right" />
 </template>
 ```

docs/src/guide/components/node-toolbar.md

@@ -19,16 +19,16 @@ npm install @vue-flow/node-toolbar
 ```vue
 <script setup>
 import { VueFlow } from '@vue-flow/core'
-import initialElements from './initial-elements'
+import initialNodes from './initialNodes'
 
 // some nodes and edges
-const elements = ref(initialElements)
+const nodes = ref(initialNodes)
 </script>
 
 <template>
-  <VueFlow v-model="elements" fit-view-on-init>
+  <VueFlow :nodes="nodes">
     <template #node-custom="nodeProps">
-      <CustomNode :data="nodeProps.data" :label="nodeProps.label" />
+      <CustomNode :data="nodeProps.data" />
     </template>
   </VueFlow>
 </template>
@@ -59,10 +59,6 @@ defineProps<Props>()
     <button>expand</button>
   </NodeToolbar>
 
-  <div :style="{ padding: '10px 20px' }">
-    {{ label }}
-  </div>
-
   <Handle type="target" :position="Position.Left" />
   <Handle type="source" :position="Position.Right" />
 </template>