Use composition for translation

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

@@ -11,7 +11,7 @@ const app = useNuxtApp();
 const { user } = useUserSession();
 const { huntSlug, questSlug } = app.$slugData;
 
-const { t, locale } = useI18n();
+const { t, locale, d } = useI18n();
 
 const titleStore = useTitleStore();
 
@@ -110,7 +110,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
       icon="refresh"
       :loading="pending"
       color="success"
-      >{{ $t('layouts.refresh') }}</VaButton
+      >{{ t('layouts.refresh') }}</VaButton
     >
     <VaButton
       v-if="user && user.role === 'ADMIN'"
@@ -146,7 +146,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
               {{ data.textRequired ? '❓' : '❔' }}: {{ data.question }}
             </p>
             <p v-if="data.question">
-              🖋: {{ $t(`enums.text_type.${data.textType}`) }}
+              🖋: {{ t(`enums.text_type.${data.textType}`) }}
             </p>
             <p v-if="data.extraText">
               <span class="uppercase">Extra points:</span> {{ data.extraText }}
@@ -163,7 +163,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
             <span v-if="data.answer.review.reviewer" class="text-sm">
               by {{ data.answer.review.reviewer.name }} at
               {{
-                $d(data.answer.updatedAt, {
+                d(data.answer.updatedAt, {
                   dateStyle: 'medium',
                   timeStyle: 'medium'
                 })
@@ -193,7 +193,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
               clearable-icon="replay"
               :type="textType[data.textType]"
               :messages="[
-                $t(`enums.text_type.${data.textType}`),
+                t(`enums.text_type.${data.textType}`),
                 data.textRequired ? 'Required Answer' : undefined
               ]"
             >
@@ -227,7 +227,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
             <p v-if="data.answer?.updatedAt">
               Last update:
               {{
-                $d(
+                d(
                   data.answer.updatedAt,
                   {
                     dateStyle: 'medium',
@@ -249,7 +249,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
               v-if="submitError.length > 0"
               color="danger"
               class="w-full text-center"
-              >{{ $t(submitError) }}</VaAlert
+              >{{ t(submitError) }}</VaAlert
             >
             <VaButton
               v-if="!data.answer?.final"
@@ -273,7 +273,7 @@ const createImageURL = (file: File) => URL.createObjectURL(file);
     </div>
   </div>
   <div v-if="error" class="mt-8 text-3xl">
-    {{ $t(parseError(error)) }}
+    {{ t(parseError(error)) }}
   </div>
 </template>