I have a problem with vue 3 and vue-i18n.

The translation works correctly in the template part. However, I have an error when using in the script part:

Uncaught (in promise) ReferenceError: $t is not defined

<template>
  <v-card class="pa-5 ma-6" elevation="10" width="550">
    <v-img max-height="50" src="../../assets/img/logo.png"></v-img>
    <v-card-title class="justify-center pt-5">
      {{ $t("connection") }}
    </v-card-title>
    <v-card-text>
       <v-text-field
            :label="$t('email')"
            variant="contained"
           :rules="[rules.required, rules.email]"
       ></v-text-field>
    </v-card-text>
  </v-card>
</template>

In the template everything is ok.

<script setup>
const rules = {
  required: (value) => !!value || $t("requiredField"),
}
</script>

In this part I have an undefined function error. However, the i18n module is declared in the main.js

My mains.js :

import { createApp } from 'vue'
import i18n from './services/i18n'
import App from './App.vue'
import vuetify from './plugins/vuetify'

createApp(App)
  .use(i18n)
  .use(vuetify)
  .mount('#app')

And my I18n.js

import { createI18n } from 'vue-i18n'

function loadLocaleMessages() {
  const locales = require.context('../locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key).default
    }
  })
  return messages
}

export default createI18n({
  legacy: false,
  locale: 'fr',
  fallbackLocale: 'fr',
  globalInjection: true,
  messages: loadLocaleMessages()
})

Have you a solution?

Thanks in advance.