Vue.js で 変更したページから遷移する際、編集破棄確認メッセージを出力したい

色々とやっつけですが、書きました。

• （アンチパターンかと思いますが、）下記コードを mixinとしてまとめて使ってます。
• ページコンポーネントで、mixinをimportして使ってください。
• 適したタイミングで addWatchEventsFor メソッドを呼びます。引数で渡した名前のプロパティの値が変更されたら、フラグが立ちます。
• フラグが立った状態でページ遷移をしようとすると、「よろしいですか？」のメッセージが出ます。

confirmEditDiscard.js

export default {
  data() {
    return {
      //対象オブジェクトが変更されたか
      isWatchPropChanged: false
    };
  },
  /**
   * 対象オブジェクトの変更監視イベントを追加する。
   */
  methods: {
    addWatchEventsFor(watchPropName) {
      this.$watch(
        watchPropName,
        // 変更があったらフラグを立てる
        function() {
          this.isWatchPropChanged = true;
        },
        { deep: true }
      );
    }
  },
  beforeRouteLeave(to, from, next) {
    // 確認画面へは、チェックせずページ遷移
    const componentName = this.$options.name;
    if (componentName === to.name.replace("Confirm", "")) {
      next();
      return;
    }
    // 変更がない場合も、チェックせずページ遷移
    if (!this.isWatchPropChanged) {
      next();
      return;
    }

    window.confirm("編集データは破棄されます。よろしいですか？")
      ? next()
      : next(false);
  }
};