Switch to translatable data

app/pages/hunt/[huntSlug]/[questSlug]/admin.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18nKey } from '~/composables/useI18nKey';
 import { useTitleStore } from '~/stores/title';
 
 definePageMeta({
@@ -9,6 +10,7 @@ const app = useNuxtApp();
 const { loggedIn } = useUserSession();
 const localePath = useLocalePath();
 const { t } = useI18n();
+const { tKey, hasKey, tSluggy } = useI18nKey();
 const router = useRouter();
 
 const { huntSlug } = app.$slugData;
@@ -21,7 +23,7 @@ const { data, pending, refresh, error } = await useFetch(
 
 useHead({
   title: t('layouts.title', {
-    title: data.value?.title || name
+    title: hasKey(data.value, 'title') ? tKey(data.value!, 'title').value : name
   })
 });
 
@@ -31,8 +33,7 @@ watch(loggedIn, (isLoggedIn) => {
   }
 });
 
-titleStore.title = data.value?.title;
-// TODO: handle data!
+titleStore.title = data.value ? tKey(data.value, 'title').value : undefined;
 </script>
 
 <template>
@@ -40,7 +41,11 @@ titleStore.title = data.value?.title;
   <VaButtonGroup>
     <VaButton
       icon="arrow_back"
-      :to="$localePath(`/hunt/${sluggy(data?.hunt || huntSlug!)}`)"
+      :to="
+        $localePath(
+          `/hunt/${data ? tSluggy(data.hunt).value : sluggy(huntSlug!)}`
+        )
+      "
       >Back to Hunt</VaButton
     >
     <VaButton icon="replay" color="success" @click="refresh">Refresh</VaButton>
@@ -54,7 +59,7 @@ titleStore.title = data.value?.title;
   <div v-if="data">
     <p>{{ data.points }} Points</p>
     <p v-if="data.extraPoints">{{ data.extraPoints }} Extra points</p>
-    <p v-if="data.extraText">Extra: {{ data.extraText }}</p>
+    <p v-if="hasKey(data, 'extraText')">Extra: {{ tKey(data, 'extraText') }}</p>
   </div>
   <div v-if="data && data.answers.length > 0">
     <VaAccordion multiple stateful>