typescript - Få beräknad egenskap att uppdateras när Vuex:s "router.currentRoute.name" ändras

Tänk på ett trollkarlstyp av applikation; det har en "gå till nästa steg"-knapp, vars text bör vara "nästa" tills det sista steget i någon interaktion med användaren:

<Button :text="!certainVuexStore.isLastStep ? 'next' : 'finish'" />

Vid varje steg ändras vyn av Vue-router (koden nedan är TypeScript):

export enum NamedRoutes {
  firstStep = 'FIRST_STEP',
  // ...
  lastStep = 'LAST_STEP'
}

export default new VueRouter({
  routes: [
    {
      name: NamedRoutes.firstStep,
      path: '/',
      component: FirstStepView
    },
    // ...
    {
      name: NamedRoutes.lastStep,
      path: `/${NamedRoutes.lastStep}`,
      component: LastStepView
    }
  ]
});

Så, den beräknade egenskapen isLastStep i vuex-butiken kan deklareras som:

import { VuexModule, Module, Action, getModule } from 'vuex-module-decorators';
import store, { StoreModuleNames } from './Store';
import router, { NamedRoutes } from '@Router/routes';


@Module({ name: StoreModuleNames.common, store, dynamic: true })
export default class Common extends VuexModule {

  public get isLastStep(): boolean {
    return router.currentRoute.name === NamedRoutes.lastStep;
  }

  @Action
  public proceedToNextStep(): void {
    switch (router.currentRoute.name) {
      // Two steps is enough for now
      case NamedRoutes.firstStep: {
        router.push(
            { name: NamedRoutes.lastStep },
            (): void => { console.log(router.currentRoute.name); })
        break;
      }
    }
  }
}

För närvarande kommer isLastStep inte att uppdateras när router.push({ name: NamedRoutes.lastStep } kommer att köras. Eftersom jag ställer denna fråga vet jag inte exakt orsaken, men det kan vara:

1. Reaktivitetsfunktioner i Vuex. Det övervakar inte router.currentRoute.name.
2. router.currentRoute.name är extern i förhållande till Vuex-modulen.

Vad är den exakta orsaken och hur kan jag lösa detta problem?