chore(docs): avoid jumping intro

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

docs/components/home/flows/Intro.vue

@@ -2,6 +2,7 @@
 import { Handle, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import { Background } from '@vue-flow/background'
+import { onBeforeUnmount } from 'vue'
 import Heart from '~icons/mdi/heart'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
@@ -56,7 +57,7 @@ const initialEdges = [
     style: { strokeWidth: 4, stroke: '#0ea5e9' },
   },
 ]
-const { getNodes, findNode, setEdges, updateNodeInternals, dimensions } = useVueFlow({
+const { getNodes, findNode, setEdges, updateNodeInternals, dimensions, nodes } = useVueFlow({
   nodes: [
     { id: 'intro', type: 'box', position: { x: 0, y: 0 } },
     { id: 'examples', type: 'box', position: { x: -50, y: 400 } },
@@ -75,7 +76,8 @@ const { getNodes, findNode, setEdges, updateNodeInternals, dimensions } = useVue
 
 const el = templateRef<HTMLDivElement>('el', null)
 
-const setElements = useDebounceFn(() => {
+const setElements = useDebounceFn(
+  () => {
     const offsetX = dimensions.value.width / 2
     const offsetY = dimensions.value.height / 4
 
@@ -175,11 +177,13 @@ const setElements = useDebounceFn(() => {
     nextTick(() => {
       updateNodeInternals()
     })
-}, 50)
+  },
+  () => (currentBreakpoint.value === null ? 5 : 50),
+)
 
-onMounted(() => {
-  watch(dimensions, setElements, { deep: true, immediate: true })
-})
+const { stop } = useResizeObserver(el, setElements)
+
+onBeforeUnmount(stop)
 
 function scrollTo() {
   const el = document.getElementById('acknowledgement')