Version 2

App.vue

<template>
    <el-container class="app-container">
        <app-sidebar/>
        <el-container direction="vertical">
            <app-header :menu="menu"/>
            <el-main>
                <transition
                    name="bounce"
                    enter-active-class="bounceInLeft"
                    leave-active-class="bounceOutRight"
                >
                    <router-view @update-menu="onUpdateMenu"/>
                </transition>
            </el-main>
        </el-container>
    </el-container>
</template>
<style lang="scss" scoped>
    @import '~bourbon';

    .app-container {
        @include size(100%);
    }
</style>
<script>
    import AppSidebar from "./AppSidebar";
    import AppHeader from "./AppHeader";

    export default {
        components: {AppSidebar, AppHeader},
        data() {
            return {
                menu: {}
            }
        },
        methods: {
            async onUpdateMenu(menu) {
                this.menu = menu;
            }
        },
    };
</script>

mixin.js

export default {
    created: function () {
        this._updateMenu();
        this._updateMenuSelect();
    },
    watch: {
        '$data.$menu'() {
            this._updateMenu();
        },
        '$data.$menuSelect'() {
            this._updateMenuSelect();
        }
    },
    methods: {
        _updateMenu: function () {
            this.$emit('update-menu', this.$data.$menu);
        },
        _updateMenuSelect: function () {
            this.$emit('update-menu-select', this.$data.$menuSelect);
        }
    }
}