Vue router issue with hooks

Navbar.vue

<template>
  <div>
    <i>(it never changes :( {{ page }})</i>
    [
      <router-link to="/">Home</router-link>
      |
      <router-link to="/about">About</router-link>
    ]
  </div>
</template>
<script>
export default {
  computed: {
    page() {
      return this.$router.currentRoute.name;
    }
  },
  beforeRouteEnter(to, from, next) {
    console.log("beforeRouteEnter");  // it never executes :(
    next();
  },
  beforeRouteUpdate(to, from, next) {
    console.log("beforeRouteUpdate");  // it never executes :(
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log("beforeRouteLeave"); // it never executes :(
    next()
  }
};
</script>