sample-intersection-observer.js

// Something fun to try:
- in App.vue, and `sections` to data
- an array of the 5 component names
- in NavBar.vue, accept a `sections` prop, instead of hardcoding the sections in NavBar
- in App.vue, instead of listing the 5 components in your template:
    - you can do:
    <component v-for="section in sections" :key="section" :is="section" />


methods: {
    handler(entries, observer) {
        for (entry of entries) {
            console.log(entry);
            const isVisible = entry.isIntersecting;
            
            if (isVisible) {
                // change this part   
                this.activeSection = entry.target.id
            }
        }
    }
}

/* By default, invokes the handler whenever:
   1. Any part of the target enters the viewport
   2. The last part of the target leaves the viewport */

let observer = new IntersectionObserver(this.handler);
this.sections.forEach(section => {
  observer.observe(document.getElementById(section));
}