docs: update examples

examples/vite/src/Basic/Basic.vue

@@ -10,7 +10,7 @@ const elements = ref<Elements>([
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
 ])
-const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges } = useVueFlow({
+const { onPaneReady, onNodeDragStop, onConnect, addEdges, setTransform, toObject } = useVueFlow({
   defaultZoom: 1.5,
   minZoom: 0.2,
   maxZoom: 4,
@@ -32,8 +32,8 @@ const updatePos = () =>
     }
   })
 
-const logToObject = () => console.log(instance.value?.toObject())
-const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
+const logToObject = () => console.log(toObject())
+const resetTransform = () => setTransform({ x: 0, y: 0, zoom: 1 })
 const toggleclass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
 </script>
 

examples/vite/src/Basic/BasicOptionsAPI.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { Elements, FlowEvents, FlowInstance } from '@braks/vue-flow'
+import type { Elements, FlowEvents, VueFlowStore } from '@braks/vue-flow'
 import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '@braks/vue-flow'
 
 export default defineComponent({
@@ -7,7 +7,7 @@ export default defineComponent({
   components: { VueFlow, Background, MiniMap, Controls },
   data() {
     return {
-      instance: null as FlowInstance | null,
+      instance: null as VueFlowStore | null,
       elements: [
         { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
         { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },