chore(docs): cleanup examples

docs/examples/stress/App.vue

@@ -1,33 +1,30 @@
 <script setup>
-import { Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
 import { MiniMap } from '@vue-flow/minimap'
 import { nextTick, ref } from 'vue'
 import { getElements } from './utils.js'
 
-const { nodes, edges } = getElements(15, 15)
+const { nodes: initialNodes, edges: initialEdges } = getElements(15, 15)
 
-const elements = ref([...nodes, ...edges])
+const nodes = ref(initialNodes)
 
-const { onPaneReady, dimensions, fitView } = useVueFlow()
+const edges = ref(initialEdges)
 
-onPaneReady(({ fitView, getElements }) => {
-  fitView({ padding: 0.2 })
-
-  console.log(getElements.value)
-})
+const { dimensions, fitView } = useVueFlow()
 
 function toggleClass() {
-  return elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
+  nodes.value = nodes.value.map((node) => ({ ...node, class: node.class === 'light' ? 'dark' : 'light' }))
 }
 
 function updatePos() {
-  elements.value.forEach((el) => {
-    if (isNode(el)) {
-      el.position = {
+  nodes.value = nodes.value.map((node) => {
+    return {
+      ...node,
+      position: {
         x: Math.random() * 10 * dimensions.value.width,
         y: Math.random() * 10 * dimensions.value.height,
-      }
+      },
     }
   })
 
@@ -38,7 +35,7 @@ function updatePos() {
 </script>
 
 <template>
-  <VueFlow v-model="elements" :min-zoom="0.1">
+  <VueFlow :nodes="nodes" :edges="edges" :min-zoom="0.1" fit-view-on-init>
     <MiniMap />
 
     <Background />