How to access properties of external components in Vue?

Question

JavaScript

I am learning the vuejs framework, it comes with vuex, vue-router, vuetify.
The main component has the following code:

main.vue

<template>
    <v-app>
        <Header/>
        <Sidebar/>
        <v-content>
            <v-container fluid>
                <v-fade-transition mode="out-in">
                    <router-view></router-view>
                </v-fade-transition>
            </v-container>
        </v-content>
    </v-app>
</template>

<script>
    import Header from './Header.vue';
    import Sidebar from './Sidebar.vue';

    export default {
        name: 'main-app',
        components: {Header,Sidebar}
    }
</script>

<style>
@import url('https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css');
</style>

And the rest:

header

<template>
    <v-toolbar
    app
  dark
  clippedLeft
    color="#000000ef"
    >
        <v-toolbar-side-icon>
      <v-icon icon @click="toggleDrawer">menu</v-icon>
        </v-toolbar-side-icon>
        <v-toolbar-title>Nova app</v-toolbar-title>
        <v-spacer></v-spacer>
            <v-btn icon><v-icon>search</v-icon></v-btn>
        <v-toolbar-items class="hidden-sm-and-down">
        </v-toolbar-items>
    </v-toolbar>
</template>

<script>
    export default {
        name: 'app-header',

    mounted() {

    },

        methods: {
            toggleDrawer() {
    drawer = !drawer //Здесь нужен доступ к свойству
            }
        }
        // methods: {
        //     logout() {
        //         this.$store.commit('logout');
        //         this.$router.push('/login');
        //     }
        // },
        // computed: {
        //     currentUser() {
        //         return this.$store.getters.currentUser
        //     }
        // }
    }
</script>

Sidebar

<template>
    <v-navigation-drawer
    v-model="drawer"
  dark
  clipped
    hide-overlay
    app
  >
    <v-toolbar flat class="transparent">
      <v-list class="pa-0">
        <v-list-tile avatar>
          <v-list-tile-avatar>
            <img src="https://randomuser.me/api/portraits/men/85.jpg">
          </v-list-tile-avatar>
          <v-list-tile-content>
            <v-list-tile-title>Dev</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-toolbar>

    <v-list class="pt-0" dense>
      <v-divider></v-divider>

      <v-list-tile v-for="item in items" :key="item.title" :to="item.link">
        <v-list-tile-action>
          <v-icon>{{ item.icon }}</v-icon>
        </v-list-tile-action>

        <v-list-tile-content>
          <v-list-tile-title>{{ item.title }}</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default {
    name: 'app-sidebar',
    data () {
      return {
        drawer: true,
        items: [
          { title: 'Home', icon: 'dashboard', link:"/" },
          { title: 'Accounts', icon: 'supervisor_account', link:"/accounts" }
        ],
        right: null
      }
    }
}
</script>

How to access the drawer property from the Sidebar component in the Header component and change it?
There was an idea to display it in the main component and use it in the components where it is needed, but I'm not sure about the correctness of this approach.

Answer 1

That's not how it's done. Use Vux.