[use a vue3 Options API]

Thank you very much @Rodrigo
Maybe I misunderstood, I didn't say that gsap is the problem, I was wondering how to implement my animation using gsap in the vue3 Options API.
Thanks again for your time!

[use a vue3 Options API]

I commented everything that is not related to my question )))
I'm interested in what I mentioned in the previous post, replace addEventLisner with @click event

[use a vue3 Options API]

@Rodrigo  thank you for the previous answer, I took something for myself. But unfortunately I can't solve my problem. My task is to replace

              element.addEventListener("click", () => {

    

                if (element !== activeElement) {

                  activeElement.animation.reverse();

   

                  element.animation.play();

                  activeElement = element;

 

                }

              });

with

 @click="handleIsActive" 

 in my methods . I apologize for not sending an example code right away, here it is -
https://stackblitz.com/edit/vue-cmtt9a?file=src%2FApp.vue 

Thank you for your time!

[use a vue3 Options API]

Hi, I am new to gsap and my problem is to replace addEventListener with @click event  
  data() {
    return {
        elements: [],
        activeElement: null,
    };
  },
  methods: {

    categoryAnimationIsActive() {

        this.elements = gsap.utils.toArray(".category__item");
        this.activeElement = this.elements[0]; 

        gsap.set(this.elements, {
            y: 30
        });

        this.elements.forEach((el) => { 
            el.animation = gsap.to(el,{
                 y: 0,
                 paused: true
             });
            if (el === this.activeElement) {
                el.animation.progress(1);
            }

              el.addEventListener("click", () => {
    
                if (el !== this.activeElement) {
                  this.activeElement.animation.reverse();
   
                  el.animation.play();
                  this.activeElement = el;

                }
              });
        });   
    }

  },
  mounted() {
    this.categoryAnimationIsActive();
  }