fix: use NuxtLink instead, lint fix :key position

app/components/layout/SeasonList.vue

@@ -9,7 +9,6 @@ import {
 import { ChevronDown } from 'lucide-vue-next';
 import { computed } from 'vue';
 import { cn } from '@/lib/utils';
-
 import useStore from '@/store';
 
 const store = useStore();
@@ -47,8 +46,8 @@ const seasons = computed(() => store.quoteData);
         <template v-for="(episode, index) in seasons[season.season_id - 1].episodes">
           <template v-if="'title' in episode">
             <SeasonListItem
-              class="bg-white/90 hover:bg-gray-100"
               :key="`rl-${index}`"
+              class="bg-white/90 hover:bg-gray-100"
               :episode-number="episode.episodeNumber"
               :season-number="episode.seasonNumber"
               :title="episode.title"

app/components/layout/SeasonListItem.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { RouterLink } from 'vue-router';
 import { cn } from '@/lib/utils';
 import useStore from '@/store';
 import { ref } from 'vue';
@@ -15,7 +14,7 @@ const props = defineProps<
   } & { class?: HTMLAttributes['class'] }
 >();
 
-const timeoutID = ref<number | null>(null);
+const timeoutID = ref<ReturnType<typeof setTimeout> | null>(null);
 
 const startHover = () => {
   timeoutID.value = setTimeout(() => {
@@ -32,10 +31,10 @@ const stopHover = () => {
 </script>
 
 <template>
-  <RouterLink
+  <NuxtLink
+    :id="`s-${seasonNumber}-ep-${episodeNumber}`"
     tabindex="0"
     :aria-label="`Episode ${episodeNumber}: ${title}`"
-    :id="`s-${seasonNumber}-ep-${episodeNumber}`"
     :to="{ name: 'Episode', params: { season: seasonNumber, episode: episodeNumber } }"
     :class="
       cn(
@@ -52,7 +51,7 @@ const stopHover = () => {
     <span class="text-foreground/80 group-hover/item:text-black">
       &OpenCurlyDoubleQuote;{{ title }}&CloseCurlyDoubleQuote;
     </span>
-  </RouterLink>
+  </NuxtLink>
 </template>
 
 <style scoped></style>