Instant changed language after call method "this.$moment.locale(myNewLocale)"

[dawid-kokoszka]

I use this configuration in main.js

const moment = require('moment')
require('moment/locale/es')

Vue.use(require('vue-moment'), {
    moment
})

and everything works great but when I called a method
this.$moment.locale(myNewLocale)
in my component the language change only after reloading component/view.
Is there a way to translate immediately?

[dawid-kokoszka]

I found a solution but I don't know if is corrected. Below method which changing languages. I used "forceUpdate" to rerender view

changeLang (lang){
     this.$moment.locale(lang)
     this.$forceUpdate()
}

[dawid-kokoszka]

this solution works only within the range of own component. How I can update child components or how create a global component with lang switcher?

[carlosgeos]

I think the rerender with force update is necessary like you said. I found a solution to update the rest of components.

I have the lang switcher in a sub component (not global), that emits a signal to this.$root when the language is changed:

this.$root.$emit('locale_signal')

Now, elements that use vue-moment filters etc, can listen to this signal and auto update themselves:

   mounted () {
     this.$root.$on("locale_signal", () => {
       this.$forceUpdate();
     })
   }

I am not using Vuex so I am using this.$root like a message center where ALL components can emit and listen.