Vue.jsで同一ページでパラメーターが変更されたことを検知する

ページ内でタブを使用している。
タブの内容に対してパラメータを用いて直接アクセスしたいという依頼を受けた。

例)http://hogehoge.com/list?tab=2
仕様:
・例のようにURLにタブを指定するNo(タブの幾つめか)が含まれていればそのアクセス時にそのタブを表示
・タブ遷移時にはURLパラメータを更新してユーザーがパラメータ付きURLをコピーできるようにする

—————-

タブ機能機能はすでに実装していたため、それを改修するため下記を利用した。
[追加した仕様]
1、URLにパラメータが含まれているかの判断と分岐
2、タブ遷移をした場合にURLにパラメータを付与する
3、パラメータが更新されたことを感知する
  ※Vue.jsではページの遷移が行われない場合、コンポーネントが再読み込みされない。
   (list → listの同一ページのアクセスとして判断される)
   そのため、上記2を実装した状態では、タブをクリックした際にURLに付与したパラメータは更新されるが、ページの中身自体は変わらないということが起こる。

◆1、URLにパラメータが含まれているかの判断と分岐
・パラメータにタブ指定を持っているかを判断する

// URLパラメータにタブの指定がある場合
if(this.$route.query.tab){
 // ?tab=パラメータがある時の処理
} else {
 // ?tab=パラメータが無い時の処理
}

◆2、タブ遷移をした場合にURLにパラメータを付与して移動
・指定した遷移先にパラメータを付けてrouter-linkで移動

<router-link :to="{name:'list', query: {tab: tab.id }}">
 <slot></slot>
</router-link>

※tab.idにはタブを判別する要素が入る
 例であれば、Noでタブを判断しているので1つめ、2つめを表す数字。

◆3、watchでパラメータが更新されたことを感知する

export default {
  watch: {
    $route(to, from) {
      // パラメータの変更を感知したときに行う処理(データの再取得)
    }
  }
};

参考サイト

Qiita
Vue Routerでparamsとqueryの取得方法
https://qiita.com/turmericN/items/b849ebe8313d863855b1
Code Pocket
Vue.jsで「?」から始まるURLのクエリパラメータを設定・取得する方法
https://code-pocket.info/20190629232/
Vue Router
パラメーター変更の検知
https://router.vuejs.org/ja/guide/essentials/dynamic-matching.html#%E3%83%8F%E3%82%9A%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%83%BC%E5%A4%89%E6%9B%B4%E3%81%AE%E6%A4%9C%E7%9F%A5