Vue.jsで、何かの処理後にリロードする

参考にしました。
https://qiita.com/CeMoReOn/items/4ce640bee42bf1a0cbd7

axiosでRailsにPOSTしてGoogleカレンダーにイベントを登録したが、ページ遷移しないのでカレンダーに反映されない。

リロードすると反映されるので意図的にリロードしたい。

vue-routerの機能を使うと出来る。

肝はこれ。

this.$router.go({path: this.$router.currentRoute.path, force: true})

$router.goを使用。

引数のpathに、遷移したいパスを指定する。
今回は現在のパス(this.$router.currentRoute.path)を渡す。
すると、現在のパスに遷移してくれる。

以下のようにパスを直指定しても同様に動きました。

this.$router.go({path: '/calendars', force: true})

最終的に以下のようになりました。

calendar.vue

   methods: {
      createEvent: function() {
        axios
        .post('/calendars',
          {
            calendar: {
              start: this.calendar.start,
              end: this.calendar.end,
              summary: this.calendar.summary,
              description: this.calendar.description
            }
          }
        ).then((res) => {
          console.log(`Success... ${res.data}`),
          this.calendar.start = '',
          this.calendar.end = '',
          this.calendar.summary = '',
          this.calendar.description = '',
          this.$router.go({path: this.$router.currentRoute.path, force: true})
        }, (error) => {
          console.log(error)
        })
      }
    }

これでPOST後にリロードされ、欲しい挙動になった。