Use composition for translation

app/pages/login.vue

@@ -4,6 +4,7 @@ import { useForm } from 'vuestic-ui';
 definePageMeta({
   middleware: ['guest']
 });
+const { t } = useI18n();
 const { fetch } = useUserSession();
 const router = useRouter();
 const route = useRoute();
@@ -52,7 +53,7 @@ async function submit() {
 </script>
 
 <template>
-  <h1 class="mb-4 text-center text-3xl">{{ $t('auth.login') }}</h1>
+  <h1 class="mb-4 text-center text-3xl">{{ t('auth.login') }}</h1>
   <div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5">
     <VaForm
       ref="formRef"
@@ -64,10 +65,10 @@ async function submit() {
         v-model="form.email"
         class="w-full"
         type="email"
-        :label="$t('auth.email')"
+        :label="t('auth.email')"
         autocomplete="email"
-        :rules="[validation.required($t('auth.email'))]"
-        :placeholder="$t('auth.email')"
+        :rules="[validation.required(t('auth.email'))]"
+        :placeholder="t('auth.email')"
         required
       >
         <template #prependInner>
@@ -79,11 +80,11 @@ async function submit() {
           v-model="form.password"
           class="w-full"
           :type="isPasswordVisible.value ? 'text' : 'password'"
-          :label="$t('auth.password')"
-          :placeholder="$t('auth.password')"
+          :label="t('auth.password')"
+          :placeholder="t('auth.password')"
           :rules="[
-            validation.required($t('auth.password')),
-            validation.min($t('auth.password'), 8)
+            validation.required(t('auth.password')),
+            validation.min(t('auth.password'), 8)
           ]"
           autocomplete="current-password"
           :minlength="8"
@@ -98,7 +99,7 @@ async function submit() {
               v-if="form.password"
               preset="plain"
               :title="
-                $t(
+                t(
                   isPasswordVisible.value
                     ? 'auth.hidePassword'
                     : 'auth.showPassword'
@@ -120,17 +121,17 @@ async function submit() {
         v-if="error.length > 0"
         color="danger"
         class="w-full text-center"
-        >{{ $t(error) }}</VaAlert
+        >{{ t(error) }}</VaAlert
       >
       <VaButtonGroup>
         <VaButton color="success" type="submit" :disabled="!isValid">{{
-          $t('auth.login')
+          t('auth.login')
         }}</VaButton>
         <VaButton
           :to="$localePath({ path: '/register', query: route.query })"
           border-color="primary"
           preset="secondary"
-          >{{ $t('auth.register_instead') }}</VaButton
+          >{{ t('auth.register_instead') }}</VaButton
         >
       </VaButtonGroup>
     </VaForm>