Запустить пользовательское событие за пределами представления маршрутизатора в Vue.js

Я новичок в Vue.js и не могу понять, как событие передается из компонента за пределами представления маршрутизатора в App.vue. В настоящее время я использую приведенный ниже код в App.vue.

<template>
    <div>
        <NavBar :userId = "userId" :loggedIn = "isLoggedIn" />
        <router-view :userId = "userId"
            @user-logged-in = "getLoggedInUserInfo" 
            @user-logged-out = "getLoggedOutUserInfo">
        </router-view>
    </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue';

export default {
    name: 'App',
    components: {
        NavBar,
    },
    data: function () {
        return {
          userId: null,
          isLoggedIn: false,
        }
    },    
    methods: {
        getLoggedInUserInfo: function(data) {
            this.userId = data.user.userId;
            this.isLoggedIn = true;
        },

        getLoggedOutUserInfo: function() {
            this.userId = '';
            this.isLoggedIn = false;
        }
    }
}
</script>

Я использую страницу (компонент) Login.vue для ввода учетных данных для входа в приложение. Эта страница является частью представления маршрутизатора. Я могу вызвать событие входа пользователя в систему на странице Login.vue, и оно работает должным образом, когда пользователь входит в систему.

this.$emit("user-logged-in", data);

Однако, когда пользователь выходит из системы, я хочу получить некоторую информацию в компоненте NavBar, чтобы можно было повторно отобразить элементы меню NavBar. Кнопка выхода из системы остается в компоненте Navbar.

Я попытался выполнить выход из App.vue из NavBar.vue, как показано, и это не сработало:

this.$emit("user-logged-out");

Буду признателен за любую оказанную помощь!