Use composition for translation

app/components/LangSwitcher.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { locale, locales } = useI18n();
+const { locale, locales, t } = useI18n();
 
 const availableLocales = computed(() => {
   return locales.value.filter((i) => i.code !== locale.value);
@@ -15,12 +15,12 @@ function l(locale: (typeof locales.value)[0]) {
     v-for="loc in availableLocales"
     :key="loc.code"
     :to="$switchLocalePath(loc.code)"
-    :title="$t('layouts.switch_lang', { locale: $t(`locales.${l(loc)}`) })"
+    :title="t('layouts.switch_lang', { locale: t(`locales.${l(loc)}`) })"
   >
     <VaSidebarItemContent>
       <VaIcon name="language" />
       <VaSidebarItemTitle>
-        {{ $t('layouts.switch_lang', { locale: $t(`locales.${l(loc)}`) }) }}
+        {{ t('layouts.switch_lang', { locale: t(`locales.${l(loc)}`) }) }}
       </VaSidebarItemTitle>
     </VaSidebarItemContent>
   </VaSidebarItem>

app/components/TeamAddModal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { parseError } from '#shared/utils/error';
 
+const { t } = useI18n();
 const emits = defineEmits<{
   update: [];
 }>();
@@ -62,7 +63,7 @@ async function submit() {
         placeholder="The best team!"
       />
       <p>An invite code will be generated automatically.</p>
-      <VaAlert color="danger" v-if="error">{{ $t(error) }}</VaAlert>
+      <VaAlert color="danger" v-if="error">{{ t(error) }}</VaAlert>
     </div>
     <template #footer>
       <VaButtonGroup :loading="pending" :disabled="pending">

app/components/TeamJoinModal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { parseError } from '#shared/utils/error';
 
+const { t } = useI18n();
 const emits = defineEmits<{
   update: [];
 }>();
@@ -103,7 +104,7 @@ async function submit() {
         </template>
       </VaInput>
 
-      <VaAlert color="danger" v-if="error">{{ $t(error) }}</VaAlert>
+      <VaAlert color="danger" v-if="error">{{ t(error) }}</VaAlert>
     </div>
     <template #footer>
       <VaButtonGroup

app/components/admin/Team.vue

@@ -3,7 +3,7 @@ import type { Team } from '~/pages/hunt/[huntSlug]/teams.vue';
 
 const { confirm } = useModal();
 const { init } = useToast();
-const { t } = useI18n();
+const { t, d } = useI18n();
 
 const props = defineProps<{
   team: Team;
@@ -163,7 +163,7 @@ async function deleteTeam() {
       <p>
         Created at:
         {{
-          $d(team.createdAt, {
+          d(team.createdAt, {
             dateStyle: 'medium',
             timeStyle: 'medium'
           })