v-t attributes in a <router-link /> element does not translate when changing $i18n.locale

vue & vue-i18n version

Vue 2.5.17-beta.0 Vue-i18n 7.6.0

Steps to reproduce

<template v-for="category in CATEGORIES">
    <router-link :to="{}" class="category" :key="category.category">
        <div class="column title-description">
            <div class="title" v-t="category.category">
            <div class="description" v-t="category.category + '_description'" />
        </div>
    </router-link>
</template>

What is Expected?

When I change $i18n.locale all v-t attributes should be translated.

What is actually happening?

The translations doesn’t render. If I change at least one of the v-t attributes to interpolation with $t it actually works, even on the v-t attributes.

Code sample that works perfectly:

<template v-for="category in CATEGORIES">
    <router-link :to="{}" class="category" :key="category.category">
        <div class="column title-description">
            <div class="title">{{ $t(category.category) }}</div>
            <div class="description" v-t="category.category + '_description'" />
        </div>
    </router-link>
</template>

[Rouche]

I also have this problem. But it happens inside a <router-view /> of a Vuetify application. None of the v-t are working. Outside seems ok.

<template>
    <div id="app">
        <v-app>
            <app-navigation></app-navigation>
            <v-container grid-list-xs grid-list-sm gird-list-md>
                <router-view></router-view>
            </v-container>
            <div>
                <!-- this one is working -->
                <span v-t="'title'"></span>
            </div>
        </v-app>
    </div>
</template>

routes

const verifyLocale: NavigationGuard = (to, from, next) => {

    loadLanguageAsync(to.params.locale).then( (): void => {
        next();

    }).catch( (): void => {
        next(`/${i18n.locale}`);
    });
};

const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,

    routes: [
        {
            path: '/',
            redirect: `/${i18n.locale}`,
        },
        {
            path: '/:locale',
            component: Locale,
            beforeEnter: verifyLocale,

            children: [
                {
                    path: '',
                    name: 'dashboard',
                    component: Dashboard,
                    beforeEnter: ifAuthenticated,
                },
                {
                    path: 'login',
                    name: 'login',
                    component: Login,
                    beforeEnter: ifNotAuthenticated,
                },
                {
                    path: '*',
                    redirect: `/${i18n.locale}`,
                },
            ],
        },
    ],
});
router.beforeEach(verifyLocale);

export default router;

[DorianGrey]

Seeing a similar issue on my playground application. It seems that the language update isnt’ immediately adopted for elements using the v-t directive. However, it gets updated the new time the component is re-rendered. In case of the playground app mentioned above: changing the language (here: via the top-right button) does not update the texts in the menu and header, until I toggle the menu again, or perform any route change (some texts are actually adopted - those are using $t, mostly in places where v-t could not be used).