Locomotive scroll doesn't work when change page on Nuxt3 project

Question

I use Locomotive scroll with gsap scrollerProxy in Nuxt3 project. When change page from index to /tets locomotive scroll doesn't work. My tets page code:

<template>
  <div class="scroll" data-scroll-container>
    <div class="horizontal-sections">
      <div class="pin-wrap">
        <div class="animation-wrap to-right">
          <div class="section">
            <NuxtLink to="/">
                <p> Chnage page</p>
                <h2>Scroll Down</h2>
            </NuxtLink>
          </div>
          <div class="section section-amin section-gray">
            <h2>You need to animate on scroll. Performing some action.</h2>
            <div class="block-anim"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="section section-lightblue">
      <h2>Some section 1</h2>
    </div>
    <div class="section">
      <h2>Some section 2</h2>
    </div>
  </div>
</template>

<script setup lang="ts">
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import LocomotiveScroll from "locomotive-scroll";
gsap.registerPlugin(ScrollTrigger);
let locoScroll: any = ref();
onMounted(() => {
  locoScroll = new LocomotiveScroll({
    el: document.querySelector(".scroll") as HTMLElement,
    smooth: true,
  });
  locoScroll.on("scroll", ScrollTrigger.update);
  ScrollTrigger.scrollerProxy(".scroll", {
    scrollTop(value) {
      return arguments.length
        ? locoScroll.scrollTo(value, { duration: 0, disableLerp: true })
        : locoScroll.scroll.instance.scroll.y;
    }, 
  });
  new ResizeObserver(() => locoScroll.update()).observe(document.querySelector("[data-scroll-container]") as HTMLElement)
  const horizontalSections = gsap.utils.toArray(".horizontal-sections");
  horizontalSections.forEach((section: any, i) => {
    const thisPinWrap = section.querySelector(".pin-wrap");
    const thisAnimWrap = thisPinWrap.querySelector(".animation-wrap");
    const getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth);
    ScrollTrigger.create({
      trigger: section,
      scroller: ".scroll",
      start: "top top",
      end: () => "+=" + thisAnimWrap.scrollWidth,
      pin: thisPinWrap,
    //   invalidateOnRefresh: true,
      scrub: true,
    });
    const fakeHorizontalAnim = gsap.fromTo(
      thisAnimWrap,
      {
        x: () => (thisAnimWrap.classList.contains("to-right") ? 0 : getToValue()),
      },
      {
        x: () => (thisAnimWrap.classList.contains("to-right") ? getToValue() : 0),
        ease: "none",
        scrollTrigger: {
          trigger: section,
          start: "top top",
          scroller: ".scroll",
          end: () => "+=" + (thisAnimWrap.scrollWidth - window.innerWidth),
          invalidateOnRefresh: true,
          scrub: true,
        },
      }
    );
    const tl = gsap.timeline();
    tl.to(".block-anim", {
      duration: 1,
      scroller: ".scroll",
      ease: "power3",
      clipPath: "inset(25% 25% 25.01% 25.01% round 25vw 25vw 25.01vw 25.01vw)",
    });
    ScrollTrigger.create({
      trigger: section,
      start: () => "top top-=" + (thisAnimWrap.scrollWidth - window.innerWidth),
      end: () => "+=" + window.innerWidth,
      animation: tl,
      scroller: ".scroll",
      scrub: true,
      markers: true,
    });
  });
});
</script>

<style lang="scss" scoped>
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
h2 {
  position: relative;
  z-index: 2;
  margin: 0;
}
.section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100vw;
  flex: 0 0 100vw;
  background: lightgray;
}
.section-gray {
  background: gray;
}
.section-lightblue {
  background: lightblue;
}
.block-anim {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: lightgoldenrodyellow;
}
.horizontal-sections {
  position: relative;
  overflow-x: hidden;
  .pin-wrap,
  .animation-wrap {
    display: flex;
    position: relative;
    z-index: 1;
    height: 100vh;
  }
}
.spacer {
  height: 50vh;
  width: 100vw;
}
</style>

Please ten my about how to fix this bug.

My repo: https://github.com/cyprianwaclaw/Skandynawia-Przystan My page url: https://skandynawia-przystan.vercel.app/