Translation throws "missing ] in computed property name" error

[cboelter]

Hi,

I've started to use Vue3 with the composition API and the vue-i18n package. But if I try to load an translation the console breaks with the following error:

Uncaught SyntaxError: missing ] in computed property name

I spent a lot of time of trying and chaning things but nothing works. Maybe someone of you can help :-)

In my main.ts I've added the module like the following:

import {createApp} from 'vue'
import {createPinia} from 'pinia'
import App from './HotelFinder.vue'
import VueEasyLightbox from 'vue-easy-lightbox'
import {createI18n} from "vue-i18n";

const app = createApp(App)

app.use(createPinia())
app.use(VueEasyLightbox)
app.use(createI18n({
    locale: 'de',
    fallbackLocale: 'en',
    messages: {
        de: {
            test: 'test'
        }
    },
    allowComposition: true,
    legacy: false,
    mode: 'composition'
}));

app.mount('#hotel-finder-app')

In my HotelFinder.vue component I tried to use the translation:

<template>
<p>{{ t("test") }}</p>
</template>

<script setup lang="ts">

import {useI18n} from "vue-i18n";

const {t} = useI18n();
</script>

Thanks for your help!

[cboelter]

I've tested a little bit more out. It seems that the error only occours if it finds an translation. If the translation key is missing I get a warning. If it is there then it throws the exception. I also checked it with the vue devtools for firefox. It seems that vue-i18n is configured and loaded correctly even the locale is passed correctly to all components.