Vue Router only applies active class once and not again

Question

WORKAROUND FOUND, SEE EDIT4

my router is acting a bit funny.

It works perfectly for the first link you click, however It doesn't apply the active class after the first time, if I refresh the page it will apply. you can see in the gif here:

Here is my navigation bar code:

<template>
  <div class="nav">
    <div class="nav__logo-box">
      <img src="/logo-no-text-morning.png" :class="$mq" alt />
    </div>
    <div class="nav__nav-list">
      <div class="nav__link">
        <router-link to="/" exact-active-class="active-page">
          <i class="fas fa-horse-head fa-3x"></i>
          <p>Home</p>
        </router-link>
      </div>
      <div class="nav__link">
        <router-link to="/about" exact-active-class="active-page">
          <i class="fas fa-info-circle fa-3x"></i>
          <p>About</p>
        </router-link>
      </div>
      <div class="nav__link">
        <router-link to="/gallery" exact-active-class="active-page">
          <i class="fas fa-images fa-3x"></i>
          <p>Gallery</p>
        </router-link>
      </div>
      <div class="nav__link">
        <router-link to="/contact" exact-active-class="active-page">
          <i class="fas fa-envelope-open-text fa-3x"></i>
          <p>Contact</p>
        </router-link>
      </div>
    </div>
  </div>
</template>

Here is my router index.ts

import Vue from "vue"; import VueRouter, { RouteConfig } from "vue-router"; import Home from "../views/Home.vue"; Vue.use(VueRouter); const routes: Array<RouteConfig> = [   {
    path: "/",
    name: "Home",
    component: Home   },   {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import("@/views/About.vue")   },   {
    path: "/contact",
    name: "Contact",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import("@/views/Contact.vue")   },   {
    path: "/gallery",
    name: "Gallery",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import("@/views/Gallery.vue")   } ]; const router = new VueRouter({   routes }); export default router;

EDIT:

here's the a look at the web browser debugger: It for some reason is adding an router-link-active to the home page (probably because its path is just "/").

And then it will add the exact-active just once, but then clicking on another page it will not change. it will stay on the page you was on before, only way to make it change is to refresh the page.

EDIT2:

So now I have decided to store the current page using the following code:

  methods: {
    getCurrentPage: function() {
      this.currentPage = this.$router.currentRoute.name;
    }
  },

However you can see the behaivour here, it again doesn't update properly and lags behind, it's maybe one or two pages behind where I actaully am.

EDIT3:

I have tried to use a computed method to watch instead but it does not update, it just gets the first page its on and doesnt update again.

data: function() {
    return {
      currentPage: ""
    };
  },
  computed: {
    getCurrentPage: function() {
      return this.$router.currentRoute.name;
    }
  },
  mounted() {
    console.log(this.$router.currentRoute.name);
    this.currentPage === this.getCurrentPage;
  }

EDIT4: (WORKAROUND FOUND)

So with the help of the comments, I've got a workaround that will work for now. it's this:

  computed: {
    getCurrentPage: function() {
      return this.$route.name;
    }
  }

On the links I then bind the active page class:

<div class="nav__nav-list">
  <div class="nav__link">
    <router-link to="/" :class="{ currentpage: getCurrentPage === 'Home' }">
      <i class="fas fa-horse-head fa-3x"></i>
      <p ref="homeLink">Home</p>
    </router-link>
  </div>
  <div class="nav__link">
    <router-link to="/about" :class="{ currentpage: getCurrentPage === 'About' }">
      <i class="fas fa-info-circle fa-3x"></i>
      <p ref="aboutLink">About</p>
    </router-link>
  </div>
  <div class="nav__link">
    <router-link to="/gallery" :class="{ currentpage: getCurrentPage === 'Gallery' }">
      <i class="fas fa-images fa-3x"></i>
      <p ref="galleryLink">Gallery</p>
    </router-link>
  </div>
  <div class="nav__link">
    <router-link to="/contact" :class="{ currentpage: getCurrentPage === 'Contact' }">
      <i class="fas fa-envelope-open-text fa-3x"></i>
      <p ref="contactLink">Contact</p>
    </router-link>
  </div>
</div>