Use composition for translation

app/layouts/default.vue

@@ -2,7 +2,7 @@
 import { useTitleStore } from '~/stores/title';
 
 const { loggedIn, clear, user } = useUserSession();
-
+const { t } = useI18n();
 const route = useRoute();
 const breakpoints = useBreakpoint();
 const titleStore = useTitleStore();
@@ -33,7 +33,7 @@ const slugs = computed(() => checkSlug(route.params));
           />
         </template>
         <template #center>
-          {{ titleStore.title || $t('layouts.default_tile') }}</template
+          {{ titleStore.title || t('layouts.default_tile') }}</template
         >
       </VaNavbar>
     </template>
@@ -159,7 +159,7 @@ const slugs = computed(() => checkSlug(route.params));
           <VaSidebarItemContent>
             <VaIcon name="logout" />
             <VaSidebarItemTitle>
-              {{ $t('auth.logout') }}
+              {{ t('auth.logout') }}
             </VaSidebarItemTitle>
           </VaSidebarItemContent>
         </VaSidebarItem>
@@ -167,7 +167,7 @@ const slugs = computed(() => checkSlug(route.params));
           <VaSidebarItemContent>
             <VaIcon name="login" />
             <VaSidebarItemTitle>
-              {{ $t('auth.login') }}
+              {{ t('auth.login') }}
             </VaSidebarItemTitle>
           </VaSidebarItemContent>
         </VaSidebarItem>