Why is state not updated after successful data fetch?

Question

Vue.js

It is necessary to stop displaying the authorization route upon successful login.
Component:

<template>
  <div id="app">
      <ul>
          <li v-if="login">
              <router-link to="/tickets">Билеты</router-link>
          </li>
          <li v-else>
              <router-link to="/authorization">Авторизация</router-link>
          </li>
      </ul>
      <router-view></router-view>
  </div>
</template>

<script>
export default {
    name: 'app',
    computed: {
        login() {
            return this.$store.authInfo
        }
    },
    components: {

    }
}
</script>

state update:

const state = {
    authInfo: {}
};
const mutations = {
    loginSuccess(state, data) {
        console.log(data); // тут объект точно есть.
        state.authInfo = {...data}
    }
};

The problem is that after writing to the state, the route continues to be visible to me.

Answer 1

return this.$store.authInfo

But maybe still this.$store.state.authInfo?