Кнопки сверху и снизу должны дублироваться а не каждая открывать своё меню VUE.js

index.html

                <div id="app">
                <div @click="activate" id="mySidebar" class="sidebar">
                    <a v-bind:href="href1">
                        {{ links1 }}
                    </a>
                    <a v-bind:href="href2">
                        {{ links2 }}
                    </a>
                    <a v-bind:href="href3">
                        {{ links3 }}
                    </a>
                    <a v-bind:href="href4">
                        {{ links4 }}
                    </a>
                    <a v-bind:href="href5">
                        {{ links5 }}
                    </a>
                    <a v-bind:href="href6">
                        {{ links6 }}
                    </a>

                </div>
                <div id="main">
                    <div @click="activate" target="nav-collapse" class="hamburgerButton">
                        <div v-bind:class="{active: isActive}" class="hamburger bar1"></div>
                        <div v-bind:class="{active: isActive}" class="hamburger bar2"></div>
                        <div v-bind:class="{active: isActive}" class="hamburger bar3"></div>
                    </div>
                </div>
                <div @click="activates" id="myShopings" class="shoopers">

                    <p>{{shop}}</p>

                </div>
                <div id="main__shoop">
                    <div @click="activates" target="nav-collapse"    class="logos__shopping herth">
                        <div v-bind:class="{active: isActive}" class="scoping ">
                            <img src="img/shoping.svg" alt="shoping">
                        </div>
                        <div id="zindex"><p>0</p></div>
                    </div>
                </div>
            </div>
 <div id="app2">
                <div @click="activate" id="mySidebar2" class="sidebar__2">
                    <a v-bind:href="href1">
                        {{ links1 }}
                    </a>
                    <a v-bind:href="href2">
                        {{ links2 }}
                    </a>
                    <a v-bind:href="href3">
                        {{ links3 }}
                    </a>
                    <a v-bind:href="href4">
                        {{ links4 }}
                    </a>
                    <a v-bind:href="href5">
                        {{ links5 }}
                    </a>
                    <a v-bind:href="href6">
                        {{ links6 }}
                    </a>
                </div>
                <div id="main2">
                    <div @click="activate" target="nav-collapse" class="hamburgerButton">
                        <div v-bind:class="{active: isActive}" class="hamburger__1 bar1__1"></div>
                        <div v-bind:class="{active: isActive}" class="hamburger__1 bar2__2"></div>
                        <div v-bind:class="{active: isActive}" class="hamburger__1 bar3__3"></div>
                    </div>
                </div>
                <div @click="activates" id="myShopings2" class="shoopers__2">
                    <p>{{shop}}</p>
                </div>
                <div id="main__shoop2">
                    <div @click="activates" target="nav-collapse" class="logos__shopping herth__2">
                        <div v-bind:class="{active: isActive}" class="scoping ">
                            <img src="img/shoping2.svg" alt="shoping">
                        </div>
                        <div id="zindex__1"><p>0</p></div>
                    </div>
                </div>
            </div>

main.js

var sourceOfTruth = {
shop:'Your cart is emptyTime to start shopping!',
href1:'/catalog',
links1: 'Catalog',
href2:'/about',
links2: 'About',
href3:'/blog',
links3: 'Blog',
href4:'/jobs',
links4: 'Jobs',
href5:'/top',
links5: 'Top',
href6:'subscribe',
links6: 'Subscribe',
isActive: false,
isActivatus: false,};

var vmA = new Vue({
el: '#app',
data: sourceOfTruth,
methods: {
    activate() {
        this.isActive = !this.isActive;
        if (this.isActive) {
            document.getElementById("mySidebar").style.width = "320px";
            document.getElementById("main").style.marginLeft = "1px";
        } else {
            document.getElementById("mySidebar").style.width = "0px";
            document.getElementById("main").style.marginLeft = "0px";
        }

    },
    activates() {
        this.isActivatus = !this.isActivatus;
        if (this.isActivatus) {
            document.getElementById("myShopings").style.width = "320px";
            document.getElementById("main__shoop").style.marginLeft = "1px";
        } else {
            document.getElementById("myShopings").style.width = "0px";
            document.getElementById("main__shoop").style.marginLeft = "0px";
        }

    }
}


});
 var vmB = new Vue({
 el: '#app2',
 data: sourceOfTruth,
 methods: {
    activate() {
        this.isActive = !this.isActive;
        if (this.isActive) {
            document.getElementById("mySidebar2").style.width = "320px";
            document.getElementById("main2").style.marginLeft = "1px";
        } else {
            document.getElementById("mySidebar2").style.width = "0px";
            document.getElementById("main2").style.marginLeft = "0px";
        }

    },
    activates() {
        this.isActivatus = !this.isActivatus;
        if (this.isActivatus) {
            document.getElementById("myShopings2").style.width = "320px";
            document.getElementById("main__shoop2").style.marginLeft = "1px";
        } else {
            document.getElementById("myShopings2").style.width = "0px";
            document.getElementById("main__shoop2").style.marginLeft = "0px";
        }

    }
}

 });

https://ru.vuejs.org/v2/guide/state-management.html#%D0%9F%D1%80%D0%BE%D1%81%D1%82%D0%BE%D0%B9-%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%B9%D0%BD%D0%B5%D1%80-%D1%81%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D0%BD%D0%B8%D1%8F-%D1%81-%D0%BD%D1%83%D0%BB%D1%8F