How to change the dropdown item in vue after login successful

Question

I have a navbar and login components in vue. So my target is when if the user login, on the dropdown in navbar, I want to show Profile as an item, and if the user is not login I want to show Sign In/Register item as an item. So I want to manipulate the dropdown that you see on the picture below:

And here is my Navbar component:

<template>
    <nav class="navbar navbar-expand-lg shadow">
        <div class="container navbar-container">
            <div class="navbar navbar-profile">
                <div class="dropdown">
                    <button class="btn dropdown-toggle" type="button" id="dropdownProfile" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-fw fa-user"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-left">
                        <!--    User is not authenticated so show login/register-->
                        <li v-if="authenticated"><router-link :to="{ name: 'login' }">Login/Register</router-link></li>
                        <!--    User is authenticated so show profile-->
                        <li v-if="authenticated"><router-link :to="{ name: 'profile' }">Profile</router-link></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
</template>
<script>
export default {
    data() {
        return {
            authenticated: false,
            authenticationFailed: false,
        };
    },
};
</script>

So in the code I didnt make anything with the authenticated/authenticationFailed values because I dont know how can I check it from the Login component. And here is my login component:

<template>
    <div id="login" class="card-container">
        <div class="card col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div class="headers">
                        <h3 class="card-header text-center active">LOGIN</h3>
                        <router-link :to="{name: 'register'}"><h4 class="card-header text-center non-active">REGISTER</h4></router-link>
                    </div>
                    <div class="card-body">
                            <div class="form-row">
                                <div class="form-group">
                                    <input type="text" class="form-control" v-model="email" placeholder="Email" id="email" @keyup.enter="signIn" >
                                </div>
                                <div class="form-group">
                                    <input type="password" class="form-control" v-model="password" placeholder="Password" id="password" @keyup.enter="signIn">
                                </div>
                                <div class="form-group form-check">
                                    <input type="checkbox" id="rememberMeSignIn" class="form-check-input">
                                    <label class="form-check-label" for="rememberMeSignIn">Remember Me</label>
                                </div>
                                <div class="form-group links">
                                    <router-link :to="{name: 'forget-password'}">Forget Password?</router-link>
                                </div>
                            </div>
                            <div class="button-area">
                                <button v-on:click="signIn()" type="submit" class="btn button">Sign In</button>
                            </div>
                    </div>
                </div>
    </div>
</template>
<script>
import authHelper from "../helpers/authHelper";
import GENERAL_APP_CONSTANTS from "../constants/GeneralAppConstants";

export default {
    name: 'Login',
    beforeMount() {
        this.authenticated = authHelper.validAuthentication();
    },
    mounted() {
        EventBus.$on(GENERAL_APP_CONSTANTS.Events.CheckAuthentication, () => {
            this.authenticated = authHelper.validAuthentication();
            if (this.authenticated) {
                this.email = this.password = "";
                this.authenticationFailed = false;
            }
        });
        EventBus.$on(GENERAL_APP_CONSTANTS.Events.LoginFailed, () => {
            this.authenticationFailed = true
        });
    },
    data () {
        return {
            authenticated: false,
            authenticationFailed: false,
            email: '',
            password: '',
            rememberMe: false,
        }
    },
    methods: {
        signIn: function () {
            authHelper.signIn(this.email, this.password, () => {
                this.$router.push({name: 'home'});
            });
        }
    }
}
</script>

I tried to make it as simple as possible and if you can help me with this , I would be really glad. PS: this is my index.vue that you can see the relation between Navbar and Login page and my login component is displaying when router-view changed:

<div id="app">
        <Topnav/>
        <Navbar/>
        <router-view></router-view>
        <Footer/>
    </div>