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

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