Quasar composition API - GSAP Scroll Snapping with ScrollTrigger

Question

I'm trying to integrate GSAP Scroll Snapping & ScrollTrigger on my Quasar App home page.

I am using composition API.

I use gsap.to() and use ref element as target

I am following this Codepen: Pair with CSS Scroll Snapping - ScrollTrigger

Component template:

  <q-page class="column" :class="{ dark: $q.dark.mode }">
    <section-hero />
    <div class="extra-space"></div>
    
    // I wanted to scroll snap here "featuredProject" when scrolling down
    <section ref="featuredProject" id="featuredProject">
      <section-featured-project />
    </section>
    
    <div></div>
    <div></div>
    <div></div>
    
  </q-page>

Component script:

import { ref, onMounted } from 'vue';
import { Hero, FeaturedProject } from 'src/components/home';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

export default {
  components: {
    'section-hero': Hero,
    'section-featured-project': FeaturedProject,
  },
  setup() {
    const featuredProject = ref(null);
    
    const runGsap = function () {
      gsap.to(featuredProject.value, {
        scrollTrigger: {
          trigger: featuredProject.value,
        },
        duration: 2,
      });
    };
    
    onMounted(() => {
      gsap.registerPlugin(ScrollTrigger);
      ScrollTrigger.defaults({
        toggleActions: 'restart pause resume pause',
        scroller: 'body',
      });
      runGsap();
    });

    return {
      featuredProject,
    };
  },
};

Component style:

 #featuredProject {
    scroll-snap-align: start;
 }

global style:

 body {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

can someone please tell me what I'm doing wrong.