chore(docs): cleanup examples

docs/examples/validation/App.vue

@@ -1,10 +1,12 @@
 <script setup>
-import { VueFlow, addEdge } from '@vue-flow/core'
 import { ref } from 'vue'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
 
-const elements = ref([
+const { addEdges } = useVueFlow()
+
+const nodes = ref([
   { id: '0', type: 'custominput', position: { x: 0, y: 150 }, isValidTargetPos: (connection) => connection.target === 'B' },
   {
     id: 'A',
@@ -16,6 +18,8 @@ const elements = ref([
   { id: 'C', type: 'custom', position: { x: 250, y: 300 }, isValidSourcePos: (connection) => connection.target === 'B' },
 ])
 
+const edges = ref([])
+
 function onConnectStart({ nodeId, handleType }) {
   return console.log('on connect start', { nodeId, handleType })
 }
@@ -26,13 +30,14 @@ function onConnectEnd(event) {
 
 function onConnect(params) {
   console.log('on connect', params)
-  addEdge(params, elements.value)
+  addEdges(params)
 }
 </script>
 
 <template>
   <VueFlow
-    v-model="elements"
+    :nodes="nodes"
+    :edges="edges"
     fit-view-on-init
     class="validationflow"
     @connect="onConnect"