Conditional rules, Logged/Not logged how to do it?

Hi,

I'm doing a SPA with VueJS, and I want to show/hide some markup accordlying of the user authenticated status.

this is where I want to apply the conditional rules:

// src/components/Nav.vue
<template>
  <div class="layout-header">
    <div class="container">
      <div class="layout-logo"><a href="#/"><b>MIRA</b>health</a></div>
      <div class="layout-ceiling-main">
        <ul v-if="user.authenticated !== null" @loggedIn="authenticateUser">
          <li><router-link to="/sign-in">Login</router-link></li>
          <li><router-link to="/sign-up">Cadastre-se</router-link></li>
          <li><Button type="primary" @click="handleSubmit('formTop')">Baixe o App do Paciente</Button></li>
        </ul>
        <ul v-else>
          <li><a @click="handleLogout()">Logout</a></li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  import auth from '../util/auth'

  export default {
    data () {
      return {
        user: {
          authenticated: null
        }
      }
    },
    methods: {
      authenticateUser () {
        this.user.authenticated = true
      },
      handleLogout () {
        auth.logout()
        this.$router.go('/login')
      }
    }
  }
</script>

But I'm checking auth via localstorage, so it isn't reactive e.g. "When user login the conditional element don't update".

here is where I do auth rules:

// src/util/auth.js
import axios from 'axios'

// URL and endpoint constants
const SIGNUP_URL = 'clinic/register'

if (getToken()) {
  axios.defaults.headers.common['Authorization'] = 'Bearer ' + getToken()
}

export default {
  // Login
  login (context, credentials) {
    axios.post('login', {
      cnpj: credentials.cnpj,
      cps: credentials.cps,
      password: credentials.password
    }, {
      headers: { usertype: credentials.usertype }
    })
      .then(function (response) {
        if (response.status === 200) {
          setToken(response.data)
        }
      })
      .catch(function (error) {
        if (error.status === 400) {
          console.log(error)
        }
      })
  },

  logout () {
    removeToken()
  },

  signup (context, creds, redir) {
    axios.post(SIGNUP_URL, {
      name: creds.name,
      email: creds.email,
      cnpj: creds.cnpj,
      password: creds.password,
      usertype: creds.usertype
    })
      .then(function (response) {
        setToken(response.data)
      })
      .catch(function (error) {
        console.log(error.response.status)
      })
  }

}

export function getAuthHeader () {
  return {
    'Authorization': 'Bearer ' + getToken()
  }
}

export function requireAuth (to, from, next) {
  if (!checkAuth()) {
    let path = '/sign-in'
    next({path: path})
  } else {
    next()
  }
}

export function checkAuth () {
  if (getToken() !== null) {
    return true
  } else {
    return false
  }
}

export function getToken () {
  return localStorage.getItem('token')
}

export function setToken (value) {
  return localStorage.setItem('token', value)
}

export function removeToken () {
  console.log('testeee')
  return localStorage.removeItem('token')
}

I'm thinking "Maybe I can use $emit", but I'm not finding a good way to do it.