portfolio/pages/index.vue

<template>
  <LayoutLeftbar />
  <div id="observe" class="h-screen snap-y snap-mandatory overflow-y-auto overflow-x-hidden bg-dark-200">
    <SlidesHeading id="heading" />
    <SlidesAbout id="about" />
    <SlidesSkills id="skills" />
  </div>
</template>

<script setup>
const router = useRouter()

const callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      router.replace({ hash: '#' + entry.target.id})
    }
  })
}

onMounted(() => {
  let targets = document.querySelectorAll('section')
  const observer = new IntersectionObserver(callback, { root: document.querySelector('#observe'), threshold: 0.9 })

  targets.forEach(target => {
    observer.observe(target)
  })
})
</script>