Как получить доступ к свойствам внешних компонентов в 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>

<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>

<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>