The buttons above and below should be duplicated and not each open its own VUE.js menu?

Question

css

Do not tell me how to do this There should be only one instance of the menu id = mySidebar and no mySidebar2 on vue,js buttons above and below should be duplicated and not each open its own menu

menu should be in the header, in the footer there is only a button

that opens or closes the menu or cart
main.js

var vm = new Vue({
    el: '#app',
    data:
      {
        shop:'Your cart is emptyTime to start shopping!',
        links1: 'Catalog',
        links2: 'Catalog',
        links3: 'Catalog',
        links4: 'Catalog',
        links5: 'Catalog',
        links6: 'Catalog',
        isActive: false,
        isActivatus: false,

    },
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 vm = new Vue({
el: '#app2',
data: {
    shop:'Your cart is emptyTime to start shopping!',
    links1: 'Catalog',
    links2: 'Catalog',
    links3: 'Catalog',
    links4: 'Catalog',
    links5: 'Catalog',
    links6: 'Catalog',
    isActive: false,
    isActivatus: false,
},
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";
        }

    }
  }

 });

index.html

<div id="app2">
                <div @click="activate" id="mySidebar2" class="sidebar__2">
                    <a href="#">{{links1}}</a>
                    <a href="#">{{links2}}</a>
                    <a href="#">{{links3}}</a>
                    <a href="#">{{links4}}</a>
                    <a href="#">{{links5}}</a>
                    <a href="#">{{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>
        </div>
 <div id="app">
                <div @click="activate" id="mySidebar" class="sidebar">
                    <a href="#">{{links1}}</a>
                    <a href="#">{{links2}}</a>
                    <a href="#">{{links3}}</a>
                    <a href="#">{{links4}}</a>
                    <a href="#">{{links5}}</a>
                    <a href="#">{{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>

Answer 1

First, we need to get rid of document.getElementById("main_shoop") in favor of computed styles or classes in the appropriate places (in the component that these elements are in).
Secondly, if you really want to use multiple instances of vuejs, then you need to make them a common store, for example, a simple container or vuex store . And then on the button to change the data in this shared storage. This data will entail a change in the calculated style and the document will come to the desired state.
Well, in general, why there are two instances of vue is not very clear. If you want to divide into parts, but do not want to use single-file components, then you can use x-templates:https://ru.vuejs.org/v2/guide/components-edge-case...