Hacky solution to set router-link class when not active

NavLink.vue

<template>
  <router-link :to="to" ref="link" :class="active ? 'text-red-500' : 'text-gray-500'">
    <slot />
  </router-link>
</template>

<script>
  export default {
    props: ['to'],

    data() {
      return {
        active: false
      }
    },

    watch: {
      '$route': {
        immediate: true,
        handler() {
          this.$nextTick(() => {
            this.active = this.$refs.link.$el.classList.contains('router-link-exact-active');
          })
        }
      }
    }
  }
</script>