vue-routerの遷移のことで質問です。

railsのindex.html.erb

index.html.erb
1<%= javascript_pack_tag 'app' %>
2<%= stylesheet_pack_tag 'app' %>
3<div id="app">
4  <header-navi></header-navi>
5  <div class="container">
6    <router-view></router-view>
7  </div>
8</div>

<header-navi>がヘッダーを表示し、<router-view>でコンテンツを表示しています。
<router-view>内でthis.$router.pushで遷移したとき、<header-navi>の情報が更新されません。
これをブラウザレベルで遷移（更新）したいときはどうすればよいでしょうか？
<router-view>内でログイン処理をしたとき、<router-view>内しか遷移しないため、<header-navi>でのメニュー項目がログアウトした状態で表示されてしまいます。
ブラウザ更新をしたら正しく表示されるようになるのですが。
https://teratail.com/questions/97166
こちらの記事を参考にthis.$router.go({ name: 'Hoge' })を使ってみたのですが、使い方が違うみたいですね。

こちらがログインの処理コードです。

<script lang="ts">
  import axios from "axios"
  import { Vue, Component } from "vue-property-decorator"

  @Component
  export default class LoginContainer extends Vue {
    email = ""
    password = ""

    async signIn(): Promise<void> {
      const params = { email: this.email, password: this.password }
      await axios.post("/api/v1/auth/sign_in", params ).then((response) => {
        this.$router.push({ name: "home" })
      }).catch(() => {
      })
    }
  }
</script>