Using Vue18n can’t get it to work

I’m trying to make a multi language website using the VueI18n library but I can’t get it to work, one of 2 things happen when using {{ $t(header.my_account) }}

• it’ll print literally header.my_account
• Error in render: “TypeError: Cannot read property ‘_t’ of undefined”

I don’t know how to get this to work. I installed it using npm install vue-i18n and created a file at resources/js/i18n.js with the following code

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n);

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] = locale(key)
        }
    });
    return messages
}

export default new VueI18n({
    locale: 'es',
    fallbackLocale: 'es',
    messages: loadLocaleMessages()
});

This is the code for my app.js, the only thing that changes is if I add i18n to the new Vue or not, if I don’t I get the $t is not defined but if I do no errors but it doesn’t work.

import {InertiaApp} from '@inertiajs/inertia-vue'
import Vue from 'vue'
import ElementUI from 'element-ui'
import lang from 'element-ui/lib/locale/lang/es'
import 'element-ui/lib/theme-chalk/reset.css'
import locale from 'element-ui/lib/locale'
import i18n from './i18n';

locale.use(lang);
Vue.use(InertiaApp);
Vue.use(ElementUI);

const app = document.getElementById('app');
app.setAttribute(':class',"{'loaded': loaded}");
new Vue({
    render: h => h(InertiaApp, {
        props: {
            initialPage: JSON.parse(app.dataset.page),
            resolveComponent: name => import(`@/Pages/${name}`).then(module => module.default),
        },
        data(){
            return{
                loaded:true
            }
        }
    }),
}).$mount(app);

I also have created a folder at resources/js/locales with two files one for each language with a json object with all the variables and the translation

{
    "store": {
        "new_products": "New Products",
        "add_to_cart": "Add to Cart",
        "categories": "Categories",
        "search": "Search here",
        "most_recent": "Most Recent",
        "price_high_low": "Price: high to low",
        "price_low_high": "Price: low to high"
    },
    "header": {
        "my_account": "My Account",
        "my_cart": "My Cart"
    },
    "menu": {
        "store": "Store",
        "inventory": "Inventory",
        "sales": "Sales",
        "categories": "Categories",
        "products": "Products",
        "users": "Users",
        "about_us": "About Us"
    }
}

What am I doing wrong?