intlify Not found 'message' key in 'en' locale using laravel vue 3 i18n

Question

i am trying to create multi-language application using laravel with Vue 3 i18n and laravel mix, but i keep getting not found key in locale, i followed this link for the steps https://blog.flycode.com/step-by-step-how-to-create-a-vue-multi-language-app-with-vue-i18n

resources/js/i18n.js

import { createI18n,LocaleMessages, VueMessageType } 
  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,
globalInjection: true,
locale: 'en',
fallbackLocale: 'fr',
formatFallbackMessages: true,
messages: loadLocaleMessages(),
}); 

resources/js/app.js

import './bootstrap';
 
import Alpine from 'alpinejs';
import { createApp } from "vue";
import router from './router'
import CompaniesIndex from './components/CompaniesIndex'
import i18n from './i18n'

window.Alpine = Alpine;

Alpine.start();

createApp({
components:{
 CompaniesIndex
},}).use(router).use(i18n).mount('#app');

resources/js/locales/en.json

{
  "message": "hello i18n !!"
}

resources/js/components/CompaniesIndex.vue

<template>
  <h1>{{ $t("message") }}</h1>
 </template>

On the page, it only shows the text "message" and when I check the console I see a warning that says [intlify] Not found 'message' key in 'en' locale messages. if there is any other information needed I can provide or if there is another way to create multi-language using laravel and Vue 3 please help me