Help! Problems with I18n into my project (Laravel + Vue.js)

Hello, Everyone.
I'm building web site by using Laravel and Vue.js.
And here, I'm going to use I18n into my project but I had some problems.
For use I18n,

I installed vue-i18n into my project correctly.
Then, created translation files such as en.json and fr.json.

Then, setted up vue-i18n configuration. Created an i18n setup file, (resources/js/i18n/index.js where I configure vue-i18n)
Then, integrated 'vue-i18n' with Vue application. This is app.js file.

...
import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/vue3";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m";
import i18n from "./i18n"; 

import plugins from "./plugins";

const appName = import.meta.env.VITE_APP_NAME || "Laravel";

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.vue`,
            import.meta.glob("./Pages/**/*.vue")
        ),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .use(i18n)
            .use(plugins)
            .mount(el);
    },
    progress: {
        color: "#4B5563",
    },
});

Finally, I used translations in components.

But I had errors.(image)
I think I made mistake into the integration of vue-i18n with Vue application.
If you have experiences with such problem, help me, please.
(This is my Code structure is following.