vue.js ログイン前とログイン後でheader表示を変えたい

Homeというコンポーネントに子コンポーネントとしてヘッダーというコンポーネントを置いております。
ヘッダーコンポーネントにはログインと登録という名前付きリンクがあり、Homeコンポーネントのrouter-viewで描画されます。

ここからが本題でこのHeaderにはログインコンポーネントが描画されログインがおこなるのですが、ログイン後遷移した際にHeaderをログイン、登録からログアウトという表示に切替えたいのですがうまく切り替える方法がわかりません。

一応header.vueの表示ロジックとしては、(これを認証している証明にしているのもどうかと思うのですが)
localstorageから認証tokenを取得し、もしnullならログインしてないのでfalse、あればログインしているのでtrueを返しlogin_flagに代入。
login_flagの状態をみて、ログイン、登録のリンクを出すかログアウトボタンを出すかを記載しています。

しかしこのロジックをcreated()に記載している為、ログインしている状態でリロードした際はログアウトボタンが出るのですが、
ログイン後vue-routerで遷移した際はインスタンスが新規に作成される訳ではないので、ログインを行ってもログインや登録のヘッダーが出たままになってしまいます。

何かrouter.pushなどで画面遷移が起こった際に、このcreatedの中に記載してるロジックを発火させたいのですがどうすればよいでしょうか？

ソースコードは以下になります。
お手数おかけしますがよろしくお願いします。

//Home.vue
<template>
    <div id="home">
      <Header/>
      <main class="container mt-4">
        <router-view></router-view>
      </main>
    </div>
</template>

<script>
import Header from './header'
//省略
  components: {　
        Header
    },
}
</script>

//Header.vue
<template>
    <div id="header">
      <header class="navbar navbar-dark bg-dark" role="navigation">
        <div v-if = "is_login === false">
          <div class="navbar-header navbar-left pull-left">
            <div class="navbar-brand">Performa</div>
          </div>
          <div class="navbar-nav ml-4">
            <router-link to="/" class="nav-link">Top</router-link>
          </div>
          <div class="navbar-nav ml-4">
            <router-link to="/sign_in" class="nav-link">ログイン</router-link>
          </div>
          <div class="navbar-nav ml-4 mr-auto">
            <router-link to="/sign_up" class="nav-link">登録</router-link>
          </div>
        </div>
        <div v-else-if = "is_login === true">
          <div class="navbar-nav ml-4 mr-auto">
            <button v-on:click="sign_out" >ログアウト</button>
          </div>
        </div>
      </header>
    </div>
</template>

<script>
import axios from 'axios';
import SignIn from '../entries_views/sign_in'
import SignUp from '../entries_views/sign_up'
export default {
  name: "header",
  data: function() {        
    return{
      is_login: null,
    }
  },
  components: {　
        SignIn,
        SignUp
    },
  created() {
    let id = localStorage.getItem("token");
    this.is_login =　id == null ? false : true;
    alert(this.is_login);
  }
}
</script>

//sign_in.vue
<template>
    <div>
        <div id="login">
            <el-form>
                <el-form-item label="メールアドレス" prop="email">
                    <el-input id="email" type="email" v-model="email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="パスワード" prop="password">
                    <el-input id="password" type="password" v-model="password" autocomplete="off"></el-input>
                </el-form-item>
                <el-button type="primary" @click="onSubmit" >ログイン</el-button>
            </el-form>
        </div>
        <router-view　name="user_page"/>
    </div>
</template>

<script>
import axios from 'axios';
axios.defaults.headers.common = {
    'Content-Type': 'application/json',
};
export default{
    data: function() {        
        return{
                id: '',
                email: '',
                password: '',
                uid: "",
                access_token: "",
                client: "",
                expiry: "",
        }
    },
    methods: {
        onSubmit: function() {
            axios
                .post("http://localhost:3000/auth/sign_in", {
                email: this.email,
                password: this.password,
                })
                .then((response) => {
                    localStorage.setItem("id",response.data.data["id"]);
                    localStorage.setItem("token",response.headers["access-token"]);
                    localStorage.setItem("uid", response.headers["uid"]);
                    localStorage.setItem("token-type", response.headers["token-type"]);
                    localStorage.setItem("client", response.headers["client"]);
                    localStorage.setItem("expiry", response.headers["expiry"]);                   
                   this.$router.push({ path: '/user_page' });
                })
                .catch(error => {
                    alert(error);
                })
        }
    }
}
</script>