Повторяющиеся события, испускаемые компонентом VueJS

Когда мой курсор мыши входит и покидает мой компонент VueJS, соответственно вызываются следующие методы.

Методы, которые вызываются, когда курсор входит и покидает мой компонент:

// located in "methods" section of my Vue component file

onMouseEnter() {
    window.Event.$emit("mouse-entered", this.index);
    console.log("Mouse entered");
},
onMouseLeave() {
    window.Event.$emit("mouse-left", this.index);
    console.log("Mouse left");
},

Ожидаемо, вот как выглядит моя консоль, когда мой курсор входит и покидает компонент (каждый раз генерируется одно событие):

Однако, что действительно странно, так это то, что в инструментах разработки Vue я вижу повторяющиеся события, которые генерируются каждый раз, когда мой курсор входит и покидает мой компонент:

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

Кто-нибудь знает, что здесь происходит и что я должен принять за источник правды?

Ниже показано, как мои экземпляры Vue объявляются и инициализируются в моем файле main.js:

// As far as I can tell, duplicated Vue instances are not being created here on page refresh

let app;

// global event bus
window.Event = new Vue();
console.log("Event bus created");

/* This section ensures the firebase auth object isn't in an intermediary state. */
firebase.auth().onAuthStateChanged(() => {
    if (!app) {
        console.log("New Vue instance created");
        app = new Vue({
            el: '#app',
            router,
            store,
            render: h => h(App)
        });
    }
});

Обратите внимание, что этот конкретный компонент повторно используется на двух разных маршрутах ("dashboard" и "home"), которые поддерживаются следующим кодом.

// Template section of App.vue file
<template>
    <div id="app">
        <keep-alive
            v-bind:include="[ 'dashboard', 'home' ]"
            <router-view></router-view>
        </keep-alive>
    </div>
</template>

Кроме того, поскольку эти два маршрута поддерживаются и кэшируются, отказ от отключения эмиттеров и прослушивателей событий $off не должен быть причиной дублирования (по крайней мере, я думаю, что не должен).

РЕДАКТИРОВАТЬ 1: я нашел все для "ввода мыши" и "ухода мыши" в каждом отдельном каталоге в моем проекте, и я могу подтвердить, что оба события генерируются только из компонента Vue. упоминается в этом посте.

РЕДАКТИРОВАТЬ 2: чтобы облегчить отладку, я поместил прослушиватель на свой самый верхний компонент (App.vue), чтобы проверить, получает ли он событие дважды (см. созданный хук во фрагменте кода ниже) . Я могу подтвердить, что он также получает событие только один раз. Я также вставил свой полный файл App.vue, поскольку приведенный выше пример был в основном для иллюстрации того, что я поддерживаю "панель инструментов" и "домой ".

<template>
    <div id="app">
        <keep-alive
            v-bind:include="keepAlive">
            <router-view></router-view>
        </keep-alive>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                isLoggedIn: false,
            };
        },
        computed: {
            keepAlive() {
                if (this.isLoggedIn) {
                    return [ 'dashboard', 'home', 'results' ];
                }
                return [ 'landing', 'signIn', 'signUp' ];
            }
        },
        watch: {
            /* This watches for route changes */
            $route(to, from) {
                /* firebase.auth().currentUser returns null if user has logged out */
                if (firebase.auth().currentUser) {
                    this.isLoggedIn = true;
                } else {
                    this.isLoggedIn = false;
                }
            }
        },
        created() {
            window.Event.$on("mouse-entered", () => {
                console.log("mouse-entered-from-App.vue");
            });
            window.Event.$on("mouse-left", () => {
                console.log("mouse-left-from-App.vue");
            });
        }
    };
</script>

Как и ожидалось, App.vue получает событие один раз (см. ниже); однако я все еще получаю повторяющиеся события в инструментах разработки Vue :(