Managing session information in vuejs - vue.js

Question

I'm making an application with Vue.js, currently working on the login/logout functionality. Basically I have in my navbar a button that is supposed to say Login when the user hasn't logged in and logout when the user session is active. The user session information is being stored in the browsers sessionStorage, so basically my question is, what's the best way to handle the communication between the components?
Here's my main component, which has a variable called "currentUser" that will pass to child components as prop for further usage.
<template>
<div id="application">
<div id="navbar">
<navbar :current-user.sync="currentUser"></navbar>
</div>
<router-view :current-user.sync="currentUser"></router-view>
</div>
</template>
<script>
var nav = require('./src/components/navbar.vue');
module.exports = {
components: {
'navbar': nav
},
ready: function(){
this.currentUser = {
userId: window.sessionStorage.getItem('userId'),
username: window.sessionStorage.getItem('user'),
scope: window.sessionStorage.getItem('scope')
}
},
data: function(){
return {
currentUser: {
userId: '',
username: '',
scope: ''
}
}
}
}
</script>
Then we have the navbar component that will basically show/display links according to the users permissions
<template>
<nav>
<div class="nav-wrapper blue darken-4">
DINAF
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>
<a v-link="'/organization/map'">Mapa de organizaciones</a>
</li>
<li>
<a v-link="'/'">Listar organizaciones</a>
</li>
<li >
<a v-link="{path: '/organization/new'}">Agregar organización</a>
</li>
<li v-if="!isLoggedIn">
<a v-link="{path: '/login'}">Login</a>
</li>
<li v-else>
<span>Welcome {{currentUser.scope}} </span><a v-on:click="logout()" class="waves-effect waves-light btn blue darken-1">Logout</a>
</li>
</ul>
</div>
</nav>
</template>
<script>
var Vue = require('vue');
var config = require('../../config.js');
module.exports = {
name: 'navbar',
props: ['currentUser'],
ready: function(){
this.isLoggedIn = this.currentUser.scope != ''
console.log(this.isLoggedIn)
},
methods: {
logout: function(){
this.$http.get(config.baseUrl() + '/v1/logout').then(function(response){
window.sessionStorage.removeItem('user');
window.sessionStorage.removeItem('userId');
window.sessionStorage.removeItem('scope');
this.currentUser = {
userId: '',
username: '',
scope: ''
}
this.$route.router.go('/');
},function(error){
console.log(error);
})
}
},
data: function(){
return {
isLoggedIn: false,
}
}
};
</script>
And the login component that logs in and saves the information into the local storage
<template >
<div class="loginContainer">
<div class="row">
<div class="col s6 offset-s3 ">
<div class="card blue-grey darken-2 white-text">
<div class="card-content">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">email</i>
<input id="username" type="text" v-model="user.username" data-error="Ingrese su nombre de usuario" class="validate">
<label for="username">Username</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">lock</i>
<input id="password" type="password" v-model="user.password" class="validate">
<label for="password"><i class="fa fa-lock" aria-hidden="true"></i> Contraseña</label>
</div>
</div>
</div>
<div class="card-action">
<a type="submit" id="loginButton" class="waves-effect waves-light btn blue-grey darken-4" v-on:click="logIn">Iniciar Sesión</a>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
var swal = require('sweetalert');
var config = require('../../config.js');
module.exports = {
name: 'login',
props: ['currentUser'],
methods: {
logIn: function(){
this.$http.post(config.baseUrl() + '/v1/login', this.user).then(function(response){
this.currentUser = {
username: response.json().user,
userId: response.json()._id,
scope: response.json().scope
}
window.sessionStorage.setItem('user', this.currentUser.username);
window.sessionStorage.setItem('userId', this.currentUser.userId);
window.sessionStorage.setItem('scope', this.currentUser.scope);
console.log(this.currentUser)
this.$route.router.go('/');
},function(error){
swal('Error', 'Usuario o password incorrecto', 'error');
});
}
},
data: function(){
return {
user: {},
}
}
}
</script>
The problem I have right now is that when you log in, the sessionStorage is being updated but not the data that's on the navbar component so the login in the navbar never changes.