lang and fallbackLang not working

[ginoking]

using laravel webpack my app.js

app.use(i18nVue, {  
    lang: 'tw',  
    fallbackLang: 'tw',  
    resolve: lang => import(`../lang/${lang}.json`),  
})

my conponent

<template>
    <div>{{ $t('welcome') }}</div>
</template>

<script>

import { trans, isLoaded } from 'laravel-vue-i18n';

export default ({

    setup(props) {
        console.log(isLoaded('tw'));

        const listToggle = async (idx, name) => {
            console.log(isLoaded('tw'));
            const { data } = await axios.post(window.location.protocol + '//' + window.location.host + "/api/stories/get", { area: idx });
        }

    },
    created() {
        console.log(trans('welcome'));
    },
    mounted() {
        console.log(trans('welcome'));
    },
    updated() {
        console.log(trans('welcome'));
    }
})
</script>

when I initialize my app, trans show 'welcome' and isLoaded('tw') return false. But when I call listToggle, trans show me '歡迎' and isLoaded('tw') is true.

I hope tw is loaded when app initialize.

Why this happen? and how can I fix that?

thx!!!

[xiCO2k]

@ginoking that happens because the trans is not reactive, and sometimes the page loads before the lang is loaded.

Check this: https://github.com/xiCO2k/laravel-vue-i18n/issues/152#issuecomment-1875046946