Reactive does not react vue-i18n

[gokhantaskan]

I'm using composition API in some components. The code below is not working when the page loads initially.

setup(props, vm) {
  const state = reactive({
    routes: [
      {
        name: vm.root.$i18n.t("titles.overview"),
        icon: "overview",
        path: { name: "Overview" },
        isFor: ["retailer", "consumer"]
      },
      ...
  return { ...toRefs(state) };
}

vue-i18n.esm.js?a925:33 [vue-i18n] Cannot translate the value of keypath 'labels.settings'. Use the value of keypath as default.

But there is nothing wrong. In another component, it is working.

<page-heading
    :title="$t('titles.overview')"
    has-datepicker
    show-date
>
</page-heading>

After changing something that causes hot reload (like console.log("x") just before const state, the sidebar shows the title normally but when the initial load, the text is just titles.blabla.

[gokhantaskan]

I tested it for every page.I refreshed every page that contains the new composition API and the result is the same (during initial load). I guess the problem is about setupor vm.root.$i18n.

[callmeDDDDD]

hi, did you solve this, i got same problem, how you done with this?

[Stanislavsky69]

hi, did you solve this, i got same problem, how you done with this?

Hi, use this package