GSAP animation not working with $ref in Nuxt - vue.js

Question

I am having an issue with a GSAP animation in a Nuxt build. The animation is to start when the
overlay navigation panel is brought into view with v-if="isMenuOpen". The nav works and shows as expected, but I want to animate the different items within the nav. The problem is GSAP isn't finding the items to animate. I've tried different approaches:
using TL.fromTo('.nav__panel-nav ul li a', { but this returns the error GSAP target .nav__panel-nav ul li a not found.
using TL.fromTo(this.$refs.li, { on both the components and wrapping HTML li element, which returns the error GSAP target undefined not found.
I'm new to working with Vue/Nuxt so i'm not sure o the best way to rectify the issue. Any direction on how to get this working, or a better approach would be appreciated.
<template>
<transition name="card">
<div class="nav" v-if="isMenuOpen">
<div class="nav__panel">
<div class="nav__panel-inner">
<div class="nav__panel-contact">
<div class="h-3">Contact Us</div>
<ul>
<li>
xxx
</li>
</ul>
<div class="nav__panel-social">
<SocialLinks />
</div>
</div>
</div>
</div>
<div class="nav__panel">
<div class="nav__panel-inner">
<nav class="nav__panel-nav">
<ul>
<li ref="li">
<NuxtLink to="/" ref="test">Home</NuxtLink>
</li>
<li>
<NuxtLink to="/about-us">About Us</NuxtLink>
</li>
<li>
<NuxtLink to="/our-expertise">Our Expertise</NuxtLink>
</li>
<li>
<NuxtLink to="/contact-us">Contact Us</NuxtLink>
</li>
</ul>
</nav>
</div>
</div>
</div>
</transition>
</template>
<script>
import { gsap } from "gsap";
export default {
computed: {
isMenuOpen() {
return this.$store.getters['navState'];
}
},
watch: {
isMenuOpen(val) {
if (val) {
document.getElementsByTagName('body')[0].classList.add('no-scroll');
this.animateNavIn();
} else {
document.getElementsByTagName('body')[0].classList.remove('no-scroll');
this.animateNavOut();
}
}
},
methods: {
animateNavIn() {
// https://blog.logrocket.com/animating-vue-with-greensock/
console.log('animate in');
const TL = gsap.timeline();
// TL.fromTo('.nav__panel-nav ul li a', {
TL.fromTo(this.$refs.li, {
duration: 1,
autoAlpha: 1,
y: '15px',
stagger: 0.05,
ease: "Power2.out"
},
{
autoAlpha: 1,
y: 0,
})
.to('.nav__panel-contact .h-3, li, .social__title, .social__links', {
duration: 1,
autoAlpha: 1,
y: 0,
stagger: 0.05,
ease: "Power2.out"
}, '-=.9');
},
animateNavOut() {
console.log('animate out');
// const TL = gsap.timeline();
// TL.to('.nav__panel-nav ul li a', {
// duration: 1,
// autoAlpha: 1,
// y: 0,
// stagger: 0.05,
// ease: "Power2.out"
// });
}
},
}
</script>

Answer 1

I've worked out what part of the issue is. The problem was with using v-if to render the nav. By using this, the elements I was trying to target weren't in the DOM so they couldn't be found. My solution was to use v-show instead. The difference is that an element with v-show will always be rendered and remain in the DOM; v-show only toggles the display CSS property of the element.
I am now able to target the HTML a tags using GSAP. I'm still not sure why $refs wouldn't work though...