Vue.js - используя v-on: нажмите и v-link вместе

Question

Я разрабатываю приложение Vue.js, и я пытаюсь создать систему входа в систему с использованием нескольких компонентов.

на моем App.vue компонента (который является «основным» компонент и имеет нав-бар) есть эта кнопка:

<a class="nav-item" v-link="'login'" v-if="!user.authenticated">Login</a> 

... 

import auth from '../auth' 

export default { 
data(){ 
    return{ 
    user = auth.user 
    } 
} 
} 

В одном другом файле (/auth/index.js) I определить «AUTH» метода, как, например:

... 
    user: { 
    authenticated: false 
    }, 

    login(email, password) { 
    axios.post(LOGIN_URL, { 
     email, 
     password 
    }).then((response) => { 
     this.user.authenticated = true; 
     this.user = response.data; 
     router.go('/home'); 
    }) 
    .catch((error)=>{ 
     console.log(error); 
    }); 
    } 

а то у меня есть еще один компонент имя Login.vue, который обрабатывает представление для шаблона входа и вызывает «auth.login» метод с требуемым Params.

Дело в том, что я хочу обновить пользователя из App.vue со значением от auth.user ПОСЛЕ того, как он войдет в систему. Как мне это сделать? Должен ли я управлять приоритетами v-on: click и v-link и придумывать новый метод?

EDIT:

Я также пытаюсь использовать метод beforeRouteEnter от меня не быть успешным

Answer 1

мне удалось найти решение, добавив это:

watch: { 
    $route() { 
    this.user = auth.user 
    } 
}, 

После документации here