How can i use refs in vue on multiple elements?

How can I use refs in my vue component (preferably in a loop) to manipulate multiple dom elements in my template? Let's say for example that I want to apply an animation with GSAP on every <p ref="pre"> in a function. How would I do that? Like would I access them in mounted as an array or something? The current code will only apply to the first element right?

My template

<template>
  <section ref="sectionText">
    <p ref="pre">
      text
    </p>
  </section>
  <section ref="sectionImage">
    <p ref="pre">
      some more text
    </p>
  </section>
  <section ref="sectionAudio">
    <p ref="pre">
      even more
    </p>
  </section>
  <section ref="sectionVideo">
    <p ref="pre">
      text
    </p>
  </section>
</template>

My component

<script>
  import gsap from 'gsap'

  export default {
    mounted() {
        gsap.to(this.$refs.pre, 0.75, {
              opacity: 0
        })
    }
  }
</script>

This approach ensures that you can apply animations to multiple DOM elements using refs in a loop.

    <template>
      <section ref="sectionText">
        <p :ref="setRef">
          text
        </p>
      </section>
      <section ref="sectionImage">
        <p :ref="setRef">
          some more text
        </p>
      </section>
      <section ref="sectionAudio">
        <p :ref="setRef">
          even more
        </p>
      </section>
      <section ref="sectionVideo">
        <p :ref="setRef">
          text
        </p>
      </section>
    </template>

    <script>
      import { gsap } from 'gsap';
    
      export default {
        data() {
          return {
            preRefs: []
          };
        },
        methods: {
          setRef(el) {
            if (el) {
              this.preRefs.push(el);
            }
          }
        },
        mounted() {
          this.preRefs.forEach((pre) => {
            gsap.to(pre, 0.75, {
              opacity: 0
            });
          });
        }
      }
    </script>