Fix missing $i18n properties

app.vue

@@ -47,7 +47,9 @@
       <!-- Locales -->
       <v-list>
         <v-list-item
-          v-for="locale of $i18n.locales.filter((l) => l !== $i18n.locale)"
+          v-for="locale of i18n.locales.value.filter(
+            (l) => l !== i18n.locale.value
+          )"
           :key="locale"
           :to="switchLocalePath(locale)"
           router
@@ -113,7 +115,9 @@
       <!-- Language selector -->
       <div class="language-selector d-none d-lg-block">
         <v-btn
-          v-for="locale of $i18n.locales.filter((l) => l !== $i18n.locale)"
+          v-for="locale of i18n.locales.value.filter(
+            (l) => l !== i18n.locale.value
+          )"
           :key="locale"
           :to="switchLocalePath(locale)"
           class="bg-nisvdarkblue text-decoration-none text-grey-lighten-1 text-uppercase"
@@ -249,10 +253,10 @@ useHead({
 @use 'vuetify/settings';
 
 /* upgradefixup: Set Vuetify 2 margin we used before upgrade to Vuetify 3
-> Global styles previously included as .v-application p or .v-application 
+> Global styles previously included as .v-application p or .v-application
 > ul are no longer included. If you need margin for p, or padding-left for
 > ul and ol, set it manually in your root component’s <style> tag.
-https://vuetifyjs.com/en/getting-started/upgrade-guide/#layout 
+https://vuetifyjs.com/en/getting-started/upgrade-guide/#layout
 */
 p {
   margin-bottom: 16px;

components/ArticlePage.vue

@@ -6,7 +6,7 @@
       <!-- Published date -->
       <p v-if="article.publishedOn" class="text-overline">
         {{ $t('published_on') }}:
-        {{ formatDate(article.publishedOn, $i18n.locale) }}
+        {{ formatDate(article.publishedOn, i18n.locale.value) }}
       </p>
 
       <figure>
@@ -63,7 +63,7 @@
         - https://github.com/nuxt/content/issues/1797
         - https://github.com/beeldengeluid/labs.beeldengeluid.nl/issues/526
       <p v-if="article.updatedAt" class="caption">
-        {{ $t('last_update') }}: {{ formatDate(article.updatedAt, $i18n.locale) }}
+        {{ $t('last_update') }}: {{ formatDate(article.updatedAt, i18n.locale) }}
       </p>
       -->
 
@@ -85,6 +85,7 @@ import { formatDate } from '~/util/date'
 import { generateSrcset } from '~/util/srcset'
 import { filterUndefined } from '~/util/frontmatter'
 
+const i18n = useI18n()
 const img = useImage()
 
 const props = defineProps({