Vue.js, Onclick или Clicks (из других пунктов меню): переключение между несколькими компонентами

Question

В настоящее время я делаю приложение для составления бюджета в Vue, которое меняется с использованием MediaQueries для размера экрана и сетки для макета.Я новичок в Vue, и я пытаюсь щелкнуть изменить "grid-template-area:" из разных выбранных кнопок.Например, нажмите кнопку «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";
    }
}