Estoy tratando de crear un proyecto usando Nuxt con Locomotive Scroll, de alguna manera el desplazamiento suave no funciona hasta que hago "Inspeccionar elemento" -> luego lo cierro. He intentado escuchar el evento de desplazamiento, obtuve el objeto de desplazamiento.

aquí está mi estructura de carpetas

 // default.vue <template> <div> <div id="appContainer" ref="appContainer" data-scroll-container class="w-screen"> <Nuxt/> </div> </div> </template> <script> export default { data() { return { lms: null, }; }, mounted() { this.$nextTick(() => { this.initScroll(); }); }, methods: { initScroll() { const _vm = this; this.lms = new this.locomotiveScroll({ el: _vm.$refs.appContainer, smooth: true, tablet: { smooth: true, }, smartphone: { smooth: true, }, getDirection: true, }); }, }, }; </script>

 // @/plugins/locomotiveScroll.js import Vue from 'vue'; import LocomotiveScroll from 'locomotive-scroll'; Object.defineProperty(Vue.prototype, 'locomotiveScroll', { value: LocomotiveScroll, });

 // nuxt.config.js plugins: [ { src: '@/plugins/locomotiveScroll', mode: 'client', } ],

¿Me estoy perdiendo de algo? He estado luchando durante horas y parece que no puedo encontrar la causa. :/