How to open a Drawer from a Toolbar?

[tsega]

I need to know how to access a Drawer component from another Toolbar component, in order to open and close the Drawer. Here is my components, i.e. App.vue:

<template>
  <!-- Don't drop "q-app" class -->
  <div id="q-app">
    <q-layout>
      <toolbar slot="header"></toolbar>
      <drawer></drawer>
      <div class="layout-view">
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </div>
    </q-layout>
  </div>
</template>

<script>
import Toolbar from './components/layout/toolbar/Toolbar.vue'
import Drawer from './components/layout/drawer/Drawer.vue'

export default {
  components: {
    'toolbar': Toolbar,
    'drawer': Drawer
  }
}
</script>

<style></style>

Toolbar.vue

<template>
  <div class="toolbar">
    <button
      class="hide-on-drawer-visible"
      @click="drawer.open()"
    >
      <i>menu</i>
    </button>
    <q-toolbar-title :padding="1">
      BuyMore Admin
    </q-toolbar-title>
    <button>
      <i>account_circle</i>
    </button>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  computed: {
    drawer () {
      return this.$parent.$children[1].$refs.leftDrawer
    }
  }
}
</script>

<style lang="styl">
</style>

Drawer.vue

<template>
  <q-drawer ref="leftDrawer">
    <div class="list platform-delimiter">
      <div class="toolbar light">
        <div class="toolbar-content">
          <div class="toolbar-title padding-1">
            <div>
              Administration
            </div>
          </div>
        </div>
      </div>
      <q-drawer-link icon="dashboard" to="/">Dashboard</q-drawer-link>
      <q-drawer-link icon="assignment_ind" to="/customers">Customers</q-drawer-link>
      <q-drawer-link icon="wc" to="/employees">Employees</q-drawer-link>
      <q-drawer-link icon="kitchen" to="/services">Services</q-drawer-link>
      <q-drawer-link icon="alarm" to="/shifts">Shifts</q-drawer-link>
      <q-drawer-link icon="monetization_on" to="/transactions">Transactions</q-drawer-link>
      <q-drawer-link icon="people" to="/users">Users</q-drawer-link>
      <div class="list-label">
        Accounts
      </div>
      <q-drawer-link icon="settings" to="/settings">Settings</q-drawer-link>
    </div>
  </q-drawer>
</template>

<script>
export default {
  data () {
    return {}
  }
}
</script>

<style lang="styl">
</style>

[tsega]

This is very strange but it seems like restarting my dev server did the trick!