router-viewが切り替わったときにナビゲーションバーを再マウント・再描画させたい

前提・実現したいこと

Vue CLIでVue Routerを使用した簡単なホームページを作っています。
画面上部には透明なナビゲーションバーがあり、スクロールした際に下に重なる背景の色によっては字が読みにくくなってしまうので、Intersection ObserverでNavigation.vueにclassを変更するpropsを渡し、暗い背景の時は字が白く、明るい背景の時は字が黒くなるようにしました。

こちらは問題なく実装できています。

↓スクロールする

発生している問題・エラーメッセージ

初めてページを開くと問題なく動きます。
しかし、Routeで別ページに行くと、字が黒くなったままになってしまします。

Routeが切り替わった時に、改めてIntersection Observerを設定し、再描画する必要かと思われますが、その方法がわかりません。
教えていただくと幸いです。よろしくお願いいたします。

該当のソースコード

App.vue

vue
1<template>
2  <div>
3    <navigation :isDark="isDark"/>
4    <router-view/>
5  </div>
6</template>
7
8<script>
9import navigation from '@/components/Navigation.vue';
10export default {
11  components: {
12    navigation
13  },
14  data() {
15    return {isDark: true}
16  },
17  mounted() {
18    const options = {
19      root: null,
20      rootMargin: "-32px",
21      threshold: 0
22    }
23    const darkBackground = document.querySelectorAll('.dark-background');
24    darkBackground.forEach(target => this.onIntersect(target, options))
25  },
26  methods: {
27    onIntersect(target, options = {}) {
28      const observer = new IntersectionObserver(this.addClass, options)
29      observer.observe(target)
30    },
31    addClass(entries) {
32      for(const e of entries) {
33        if (e.isIntersecting) {this.isDark = true;
34        } else {this.isDark = false;}
35      }
36    }
37  }
38}
39</script>
40
41<style lang="scss">
42// （省略）
43</style>

Navigation.vue

vue
1<template>
2  <header :class="{ lighten: isDark, darken: !isDark }">
3    <div id="title">
4      <h1>Navbar</h1>
5    </div>
6    <div id="nav">
7      <router-link to="/">HOME</router-link> | 
8      <router-link to="/about">ABOUT</router-link>
9    </div>
10  </header>
11</template>
12
13<script>
14export default {
15  name: 'navigation',
16  props: ['isDark']
17  
18}
19</script>
20
21<style lang="scss" scoped>
22header {
23  $light-text: #fff;
24  $dark-text: #000;
25// （中略）
26  transition: all 1s;
27  &.darken {
28    color: $dark-text;
29    a {
30      color: $dark-text;
31      transition: all 1s;
32      &.router-link-exact-active {
33        color: $dark-text;
34        text-decoration: underline;
35      }
36    }
37  }
38
39  &.lighten {
40    color: $light-text;
41    a {
42      color: $light-text;
43      transition: all 1s;
44      &.router-link-exact-active {
45        color: $light-text;
46        text-decoration: underline;
47      }
48    }
49  }
50
51}
52</style>