Почему laravel-vue-i18n не переводит строки после обновления страницы?

Question

[Виктор]

Laravel 11, Vue 3, Inertia
app.js

.....
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, Ziggy)
            .use(i18nVue, {
                resolve: async lang => {
                    const langs = import.meta.glob('../../lang/*.json');
                    return await langs[`../../lang/php_${lang}.json`]();
                }
            })
.....

item.vue

<script setup>
...
const form = useForm({
     type_shop: 'Desktop',
...
})
 const type_shop_data = ref ([
     { value: 'Desktop', title:  wTrans('shop.desktop')  },
     { value: 'Laptop', title:  wTrans('shop.laptop')  },
     { value: 'Other', title:  wTrans('shop.other')  }
 ]);
....
</script>
<template>
....
<Autocomplete
   v-model="form.type_shop"
   :is-async="false"
  :items="type_shop_data"
/>
....
</template>

Autocomplete.vue

<script setup>
const props = defineProps({
    items: {
        type: Array,
        required: false,
        default: () => [],
    },
    modelValue: [String,Object],
....
onMounted(() => {
    if (props.items.length > 0){
        isAsync.value = false
        if (props.modelValue){
            let foundObject = props.items.find(function(item) {
                return item.value === props.modelValue;
            });
         //   console.log('foundObject:', foundObject);
             if (foundObject) {
                setResult(foundObject)
            }
        }
    }else{
        if (props.selected){
            setResult(props.selected)
        }
    }
})
.....
function setResult(result) {
   console.log('result.value:', result.value )
    console.log('result.title', result.title )
    search.value = (result.title) ? result.title : '';
    isOpen.value = false;
    if (props.returnItem === "data") {
        emit('update:modelValue', result)
    }else{
        emit('update:modelValue', result.value)
    }
}
.....

Когда я переходжу по ссылкам (Link/Inertia), то все работает нормально переводы обрабатываются:
в консоли
result.value: Desktop Autocomplete.vue:217:13
result.title Настольный ПК
но когда обновляю страницу (например Ctrl+F5) то переводы слетают в этом компоненте (остальное на странице переводит)
в консоли
result.value: Desktop Autocomplete.vue:217:13
result.title shop.desktop
Как исправить?

Comments

[Aetae]

Ну так а lang откуда берётся то и как сохраняется?
Когда ты "переходишь по страницам" - переходы виртуальные, на клиенте, если на клиенте lang изменился то он и остаётся. Когда ты обновляешь страницу - отрабатывает загрузка с нуля и если на сервере(или в url) никак lang не сохранён то и будет значение по умолчанию.
Детальнее - сам смотри.

[Виктор]

Насколько я понял, при обновлении страницы в дочернем компоненте не успевают загружаться переводы, в документации я нашел функцию isLoaded(lang?: string) чтобы проверить, загружены ли переводы.
я сделал следующее

async function loadTranslations() {
    if (isLoaded()) {
   // Если переводы уже загружены
        type_shop_data.value = [
            { value: 'Desktop', title: trans('shop.desktop') },
            { value: 'Laptop', title: trans('shop.laptop') },
            { value: 'Other', title: trans('shop.other') }
        ];
        isDataLoaded.value = true;
    } else {
        // Если переводы еще не загружены, ждем их загрузки
 // Используем промес для проверки загрузки
        await new Promise(resolve => {
            const interval = setInterval(() => {
                if (isLoaded()) {
                    clearInterval(interval);
                    resolve();
                }
            }, 100);
        });

        // После завершения загрузки
        type_shop_data.value = [
            { value: 'Desktop', title: trans('shop.desktop') },
            { value: 'Laptop', title: trans('shop.laptop') },
            { value: 'Other', title: trans('shop.other') }
        ];
        isDataLoaded.value = true;
    }
}
...................
<Autocomplete
  v-if="isDataLoaded"
   v-model="form.type_shop"
   :is-async="false"
  :items="type_shop_data"
/>
  <p v-else>Loading...</p>

Другого решения я пока не нашел

[heaventold]

Виктор, в самом деле тоже была такая ошибка. Что я для этого сделал:
1) проверил не теряется ли реактивность
2) добавил computed свойство для вывода информации из списка
3) начал хранить lang в localStorage, чтобы была возможность проверить в компоненте выбранный язык