cringe sfx

client/app/layouts/auth.vue

@@ -4,7 +4,7 @@
 
     <div v-auto-animate class="w-1/2 m-auto">
       <div class="text-center">
-        <PrimeSelectButton v-model="tab" class="mb-6" :options="options" option-label="label" :allow-empty="false" />
+        <PrimeSelectButton :model-value="tab" class="mb-6" :options="options" option-label="label" :allow-empty="false" @update:model-value="onTabChanged" />
       </div>
 
       <slot />
@@ -15,28 +15,35 @@
 </template>
 
 <script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
+
 const route = useRoute()
+const router = useRouter()
 const { version } = useApp()
 
+interface Tab {
+  label: string
+  route: RouteLocationRaw
+}
+
 const options = computed(() => {
   return [
     {
       label: 'Login',
-      routeName: 'Login',
+      route: { name: 'Login' },
     },
     {
       label: 'Register',
-      routeName: 'Register',
+      route: { name: 'Register' },
     },
-  ]
+  ] as Tab[]
 })
 
-const tab = shallowRef(options.value.find(option => route.name === option.routeName))
-
-watch(tab, (tab) => {
-  if (!tab)
-    return
-
-  navigateTo({ name: tab.routeName })
+const tab = computed(() => {
+  return options.value.find(option => route.name === router.resolve(option.route)?.name)
 })
+
+function onTabChanged(tab: Tab) {
+  navigateTo(tab.route)
+}
 </script>