Avoid handle IntersectionObserver when use window.scrollTo with behavior smooth

Question

I'm creating a landing page using nuxt, I use hash to indicate each route on my page, for this I'm using scrollBehavior to handle hash on route and scroll to section with smooth:

  router: {
    scrollBehavior: async (to, from, savedPosition) => {
      console.log(to, from, savedPosition);
      if (savedPosition) {
        return savedPosition;
      }

      const findEl = async (hash, x) => {
        return (
          document.querySelector(hash) ||
          new Promise((resolve, reject) => {
            if (x > 50) {
              return resolve();
            }
            setTimeout(() => {
              resolve(findEl(hash, ++x || 1));
            }, 100);
          })
        );
      };

      console.log("to.hash", to.hash);
      if (to.hash) {
        let el = await findEl(to.hash);
        console.log("el", el);
        if ("scrollBehavior" in document.documentElement.style) {
          return window.scrollTo({ top: el.offsetTop, behavior: "smooth" });
          // removing behavior not cause conflicts
          //return window.scrollTo(0, el.offsetTop);
        } else {
          return window.scrollTo(0, el.offsetTop);
        }
      }

      return { x: 0, y: 0 };
    }
  },

And I'm using an IntersectionObserver too, so when user scrolls I replace the route on nuxt if section appears at least 60% on sceen view.

The issue is when user is on section 1 and they want to go to section 3, as the observer handle that the section two is appeared on screen handle this route and avoid send user to section 3.

I'm not sure how to avoid hanlde IntersectionObserver event when I update route on nuxt with scroll smooth behaivior.

    observeSections() {
      console.log("this.sectionObserver", this.sectionObserver);
      try {
        this.sectionObserver.disconnect();
      } catch (error) {}

      const options = {
        rootMargin: "0px",
        threshold: 0.6,
      };
      this.sectionObserver = new IntersectionObserver(
        this.sectionObserverHandler,
        options
      );

      // Observe each section
      const sections = document.querySelectorAll(".section");
      sections.forEach((section) => {
        this.sectionObserver.observe(section);
      });
    },
    sectionObserverHandler(entries) {
      for (const entry of entries) {
        if (entry.isIntersecting) {
          const sectionId = entry.target.id;
          console.log("intersection in", sectionId);
          // Push sectionId to router here
          this.$router.replace({
            name: this.$route.name,
            hash: `#${sectionId}`,
          });
        }
      }
    },

If you want to reproduce my project I create a simple nuxt app with my work. Try to go to section 3 or 4 from section 1 and you see it stops on section 2. CodeSandBox: https://codesandbox.io/s/optimistic-bash-y8ccz