Vue.js，Onclick或Clicks（其他菜单项）：在多个组件之间切换

Question

当前，我正在Vue中制作一个预算应用程序，该应用程序会使用MediaQueries更改屏幕大小，并使用网格更改布局。我是vue的新手，正在尝试从选定的不同按钮onclick更改“ grid-template-areas：”。 例如，点击P按钮：不显示购买，不显示预算， 单击S按钮时：不显示统计信息，而不显示购买信息等。 但是问题仅在于移动视图。关于应该如何做的任何帮助或建议都很好。

Github Repo的完整项目：
https://github.com/LandonHarvey/BudgetProject.git 分支VueSideProject

当前代码：

<template>
     <div id="app">
            <budheader/>
            <sidebar/>
            <div id="mobileSidebar">
                <div id="mobileMenuSidebar" class="box"><button class="circle" v-bind:style="buttonCircle" v-on:click="miniOpen = !miniOpen">M</button></div>
                <div v-if="miniOpen"><button id="statsBubble" class="minicircle">S</button></div>
                <div v-if="miniOpen"><button id="purchaseBubble" class="minicircle">P</button></div>
                <div v-if="miniOpen"><button id="settingBubble" class="minicircle">O</button></div>
            </div>
            <purchase/>
            <budgetandFinancialsContainer/>
            <budfooter/>
        </div>
</template>

Script:

    <script>
    import budheader from './components/budheader.vue';
    import sidebar from './components/sidebar.vue';
    import purchase from './components/purchase.vue';
import budgetandFinancialsContainer from './components/budgetandFinancialsContainer.vue';
import budfooter from './components/budfooter.vue';


export default {
        name: 'App',
        components: {
        budheader,
        sidebar,
        purchase,
        budgetandFinancialsContainer,
        budfooter,
        },
        data: () => {
            return {
                buttonCircle: {
                    background: 'blue',
                },
                miniOpen: false,
            };
        },
    };
</script>

CSS

#app {
    height: 100vh;
    display: grid;
    grid-gap: .1em;
    grid-template-rows: 100%;
    grid-template-areas:
            "budgetAndFinancials";
}



@media screen and (min-width: 768px) { 

    #app {
        grid-template-columns: 6% 35% auto;
        grid-template-rows: 100%;
        grid-gap: .1em;
        grid-template-areas:
                "sidebar budgetAndFinancials purchase";
    }

    #mobileSidebar {
        display: none;
    }

}

@media screen and (min-width: 1024px) {

    #app {
        grid-template-columns: 45% 55%;
        grid-template-rows: .8fr 8.7fr .5fr;
        grid-gap: .1em;
        grid-template-areas:
                "header header"
                "budgetAndFinancials purchase"
                "footer footer";
    }
}