How to correctly kill off and reinitialize ScrollTrigger? (Nuxt + LocomotiveScroll)

Question

I'm using GSAP ScrollTrigger and LocomotiveScroll in a Nuxt application. Everything is working fine so far, except when changing routes. I guess, I have to kill off and reinitialize LocomotiveScroll and ScrollTrigger?

The relevant JS:

export default {
  data() {
    return {
      lmS: null
    };
  },

  mounted() {
    this.lmS = new this.locomotiveScroll({
      el: document.querySelector(".js-scroll"),
      smooth: true,
      direction: "horizontal",
      lerp: 0.1,
      smartphone: {
        smooth: false,
        direction: "vertical"
      }
    });

    //////////////////SCROLLTRIGGER SETUP//////////////////

    this.lmS.on("scroll", this.$ScrollTrigger.update);

    var that = this;

    this.$ScrollTrigger.scrollerProxy(".js-scroll", {
      scrollTop(value) {
        return arguments.length
          ? that.lmS.scrollTo(value, 0, 0)
          : that.lmS.scroll.instance.scroll.y;
      },
      scrollLeft(value) {
        return arguments.length
          ? that.lmS.scrollTo(value, 0, 0)
          : that.lmS.scroll.instance.scroll.x;
      },
      getBoundingClientRect() {
        return {
          top: 0,
          left: 0,
          width: window.innerWidth,
          height: window.innerHeight
        };
      },
      pinType: document.querySelector(".js-scroll").style.transform
        ? "transform"
        : "fixed"
    });

    this.$ScrollTrigger.addEventListener("refresh", () => this.lmS.update());
    this.$ScrollTrigger.refresh(true);
  },

  destroyed() {
    //window.removeEventListener("refresh", () => this.lmS.update());
    //let triggers = this.$ScrollTrigger.getAll();
    //triggers.forEach((trigger) => {
    //trigger.kill(false, true);
    //});
    this.lmS.destroy();
    this.lmS = null;
  }
};

I’ve set up a minimal codesandbox: https://codesandbox.io/s/scrolltrigger-routechange-gv75r?file=/mixins/locomotive.js

Would appreciate any tips! :)

---

Updated JS:

export default {
  data() {
    return {
      sTrigger: null
      lmS: null
    };
  },

  mounted() {
    this.lmS = new this.locomotiveScroll({
      el: document.querySelector(".js-scroll"),
      smooth: true,
      direction: "horizontal",
      lerp: 0.1,
      smartphone: {
        smooth: false,
        direction: "vertical"
      }
    });

    //////////////////SCROLLTRIGGER SETUP//////////////////
    this.sTrigger = this.$ScrollTrigger

    this.lmS.on("scroll", this.sTrigger.update);

    var that = this;

    this.sTrigger.scrollerProxy(".js-scroll", {
      scrollTop(value) {
        return arguments.length
          ? that.lmS.scrollTo(value, 0, 0)
          : that.lmS.scroll.instance.scroll.y;
      },
      scrollLeft(value) {
        return arguments.length
          ? that.lmS.scrollTo(value, 0, 0)
          : that.lmS.scroll.instance.scroll.x;
      },
      getBoundingClientRect() {
        return {
          top: 0,
          left: 0,
          width: window.innerWidth,
          height: window.innerHeight
        };
      },
      pinType: document.querySelector(".js-scroll").style.transform
        ? "transform"
        : "fixed"
    });

    this.sTrigger.addEventListener("refresh", () => this.lmS.update());
    this.sTrigger.refresh(true);
  },

  beforeDestroy(){
    window.removeEventListener('refresh', () => this.lmS.update())
    let triggers = this.sTrigger.getAll()
      triggers.forEach(trigger => {
        trigger.kill()
      })
    this.sTrigger = null
  },

  destroyed() {
    this.lmS.destroy();
    this.lmS = null;
  }
};