V-T directive not reactive with locale change

When we use the directive <span v-t="'path'"></span> , translation is not reactive when the locale of i18n changed.

Fiddle example

[anzuj]

@austi10 probably way too late, but to solve the reactivity problem you may just use v-text directive instead. Solution nr 5 here.

[austi10]

I’m facing a similar problem that @ar53n mentioned above. I am using vuetify toolbar for representing a navbar. When I select a flag from the drop down menu of this navbar, the translations for the toolbar items are not performed for this component (which is not specified in the router view of the App component) alone, however the other components (which reside inside the router-view) are translated. I am using v-t directive. Although $t/$tc work fine, but I would rather prefer to use v-t directive due to its caching advantage in my application. Using object syntax for v-t directive works by specifying the locale as following

v-btn v-t=“‘{path: ‘Navbar.Option’, locale: this.$i18n.locale}’”

However I do not want to include locale property each and everytime into my HTML templates, which only includes redundancy