Changing locale doesn't work for js files

Versions: “vue”: “^2.6.11”, “vue-i18n”: “^8.17.3”

I added i18n in external js file and exported const from that file.

import i18n from '@/plugins/i18n';

export const menu = [
    {
        title: i18n.t('navigation.schedule'),
        children: [
            {
                title: i18n.t('navigation.planning'),
                path: '/checkpoint/control_calendar'
            },
            {
                title: i18n.t('navigation.calendar'),
                path: '/checkpoint/control_summary_calendar'
            }
        ]
    },
]

Later I imported data in SFC. But When I change locale, data from that js file doesn’t change.

[kazupon]

Sorry, for the late reply to your response. 🙇

Unfortunately, the way to use it, in this case, is not to let i18n.t evaluated messages change reactively when you change the locale. because i18n instances use the mechanism of Vue’s reactive system. Vue’s reactive system (especially Vue 2.x, but Vue 3, which are designed to work outside Vue components) is generally intended to be used within Vue components.

The workaround is to define a function that is passed an i18n instance, and use the evaluated data in computed prop, as in the code I committed at the following URL. https://github.com/kazupon/vue-i18n-v8-repro-1045/commit/640edbdaa829ac2a50dc6ad02f3707db40544492

Computed prop works with Vue’s reactive system. i18n.t evaluated in this function will be tracked in the dependency of Vue’s reactive system.

Thanks.

[DariaYeremina]

@kazupon thank you for your help