Data attributes are not updated when switching language in nuxt

# vue & vue-i18n version

“nuxt”: “1.3.0” “vue”:“2.5.13” “vue-i18n”: “7.4.2”

Hi, I see a problem when switching language and using this.$i18n.t("message") inside the data object/function using nuxt.

Steps to reproduce

This is happening only when using components and the component is loaded in the layout of the page. If I put the component whitin the page file itself the problem dissapear.

I don’t know if there is an issue of nuxt, vue-i18n or something about vue.

this is the layout I use,

<v-app >
   <Toolbar />
    <v-content>
     <nuxt ></nuxt>
    </v-content>
    <Footer />
  </v-app>
</template>

Toolbar component data:

data() {
      return {        
         links: [
          {  title: this.$i18n.t('toolbar.about'), to: 'about' },
        ]
      }
    }

Here is the link I use to switch the language <nuxt-link flat v-if="$i18n.locale === 'es'" :to="`/en` + $route.fullPath" active-class="none" class="lang" exact>EN </nuxt-link>

The problem is also not occurring if I use the $t('message') function directly in the html elements, only when use the data attributes to populate the links.

What is Expected?

data attributes to be translated on language switching

What is actually happening?

The problem is that the data attributes doesn’t get translated/refreshed.

Reproduction Link

Sorry for not attach a codepen, but I don’t know how to include nuxt in there.

[agcty]

OK the solution is really easy: For example I had a Navbar which iterated over a list of items which were defined in the data function like this:

data() {
    return {
      navItems: [
        { id: 1, text: this.$t("house.house"), link: "/" },
        { id: 2, text: this.$t("forum.forum"), link: "/forum" },
        { id: 3, text: this.$t("poll.polls"), link: "/vote" },
        {
          id: 4,
          text: this.$t("blackboard.blackboard"),
          link: "/blackboard"
        },
        {
          id: 6,
          text: this.$t("issue.reportIssue"),
          link: "/issues"
        }
      ];
    }
}

I literally just moved it to a computed property:

computed: {
navItems() {
      return [
        { id: 1, text: this.$t("house.house"), link: "/" },
        { id: 2, text: this.$t("forum.forum"), link: "/forum" },
        { id: 3, text: this.$t("poll.polls"), link: "/vote" },
        {
          id: 4,
          text: this.$t("blackboard.blackboard"),
          link: "/blackboard"
        },
        {
          id: 6,
          text: this.$t("issue.reportIssue"),
          link: "/issues"
        }
      ];
    }
}

[bakhti-uzb]

@agcty Thank you, Worked for me