Why is there no re-render after login?

When the user logs in, the toolbar items (created with vuetify) do not change. I am using Vuex to set and get the token required to check whether the user logged in or not. The token is stored in localStorage (for the sake of simplicity).

I am using computed property to check for the token existence in the Toolbar component. But I can't figure out how to change the Toolbar items to the ones specified with v-if.

When user logs in, the toolbar items stay the same (I think because Vue tries to be as efficient as possible and doesn't render the toolbar again). But how can I overcome this?

//Toolbar.vue component
<template>                
             <v-toolbar-items v-if="userLoginStatus">

                <v-btn text
                    :to="'/'"
                    v-on:click="logout"
                    v-on:click.prevent
                    >
                    <v-icon left>fas fa-sign-out-alt</v-icon>
                    Sign out
                </v-btn>
             </v-toolbar-items>

            <v-toolbar-items v-else>
              <v-btn text
                  v-else
                  :to="/login"
                  v-on:click.prevent
                  :width="123"
                  >
                  Login
              </v-btn>
              <v-btn text
                  v-else
                  :to="/register"
                  v-on:click.prevent
                  :width="123"
                  >
                  Register
              </v-btn>
            </v-toolbar-items>
</template>

<script>

export default {
  name: 'Toolbar',
  computed: {
    userLoginStatus() {
      return this.$store.getters['user/getToken'];
    }
  },
  methods: {
    logout() {
      let conf = confirm("Are you sure you want to logout?");
      if(conf === true) {
        this.$store.commit('user/logout')
      }
    }
  },

}

</script>





//Login component
<template>

<v-container fill-height>
        <v-card>

          <v-card-text>
            <v-form
              ref="form"
            >

              <v-text-field
                v-model="email"
                label="E-mail"
                required
              ></v-text-field>

              <v-text-field
                label="Password"
                v-model="password"
                required
              ></v-text-field>

            </v-form>
          </v-card-text>

          <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                  depressed color="primary"
                  @click="login"
                >
                  Log in
                </v-btn>
          </v-card-actions>

        </v-card>
  </v-container>
</template>

<script>

export default {
  name: 'Login',
 data: () => {
    return {
      password: '',
      email: '',
    };
  },
  methods: {
    login () {
          this.$axios({
              method: 'post',
              url: '/login',
              headers: {
                'Content-Type': 'application/json'  
              },
              data: {
                email: this.email,
                password: this.password
              }
          })
          .then((response) => {
            if (response.status === 200) {

                this.$store.commit('user/credentialsSetter', 
                {username: resp.data.username,
                email: this.email,
                token: resp.data.token});

                this.$store.commit('userInfo/setToken',resp.data.token)
                this.$router.push('/');
            }
          })
          .catch(error => {
                if (error.response) {
                    console.log(error.response.data)
                    console.log(error.response.status)
                    console.log(error.response.headers)
                }
          })

    },
  },

}

</script>