我有同一类的多个路由器链接，我想分别在这些链接上执行悬停状态动画。我使用模板$refs隔离悬停时的事件/动画目标，如下所示：

<section class="home__project">
        <router-link @mouseover="titleOver" @mouseout="titleOut" ref="title" to="/first-route" class="home__project__title">First Route</router-link><br>
        <router-link @mouseover="titleOver" @mouseout="titleOut" ref="title" to="/second-route" class="home__project__title">Second Route</router-link><br>
        <router-link @mouseover="titleOver" @mouseout="titleOut"  ref="title" to="/third-route" class="home__project__title">Third Route</router-link>
</section>

methods: {
    titleOver() {
      console.log(this.$refs.title)
      gsap.timeline({paused:true}).to(this.$refs.title, { 
      opacity: 0,
        stagger: 0.01,
        duration: .2, 
        ease: "back"
      }).play();
    },
    titleOut() {
      gsap.timeline({paused:true}).to(this.$refs.title, { 
      opacity: 1,
        stagger: 0.01,
        duration: .2, 
        ease: "back"
      }).reverse();
    },
  }

现在我有greensock动画调整不透明度只是为了让测试简单，但我甚至不能让它这样做。登录中 this.$refs.title 在mouseover内部，方法仅返回最后一个子级的代理事件处理程序（“第三个路由”）。网上所有的例子似乎都遵循相同的基本模式，所以我不确定我哪里出了问题。使用vue参照选择同一类的多个元素之一并使用greensock设置其动画的正确方法是什么？