Как менять class элементов другого компонента у Vue?

Нажав на значок: (Sidebar.vue)

<i class='bx bx-menu' v-on:click="toggleMenu()" id="btn"></i>

Я хотел бы переключать классы элементов, которые находятся в других компонентах:

methods: {
            toggleMenu() {
    document.querySelector(".header").classList.toggle("changeWidth");
    document.querySelector(".footer").classList.toggle("changeWidth");
    document.querySelector("#app-content").classList.toggle("addOpacity");
    document.querySelector(".main-content").classList.toggle("main-content_move-left");
            }
         }

Могу ли я сделать это по-другому, используя инструменты Vue?(Помогите пожалуйста)