Never mind, I realized my mistake. In the code above I needed to add ref=“leftDrawer” to the “wis-sidebar” component in App.vue and not to the drawer within the component itself. Thanks for the help.

For my App.Vue I have

<template>
<div id=“q-app”>
<q-layout>
<div slot=“header” class=“toolbar”>
<button class=“hide-on-drawer-visible” @click="$refs.leftDrawer.open()"><i>menu</i></button>
<q-toolbar-title :padding=“1”>Title</q-toolbar-title>
</div>
<wis-sidebar></wis-sidebar>
</q-layout>
</div>
</template>

Within the “wis-sidebar” component above, I then have the drawer with the ref:

<template>
<q-drawer ref=“leftDrawer”>
<div class=“list”>
<div v-for=“item in items”>
<q-collapsible v-if=“item.items” group=“sidebar” :icon=“item.icon” :label=“item.label”>
<router-link v-for=“subItem in item.items” tag=“div” class=“item item-link” :to=“subItem.route” exact>
<i class=“item-primary”>{{ subItem.icon }}</i>
<div class=“item-content”>{{ subItem.label }}</div>
</router-link>
</q-collapsible>
<router-link v-else tag=“div” class=“item item-link” :to=“item.route” exact>
<i class=“item-primary”>{{ item.icon }}</i>
<div class=“item-content”>{{ item.label }}</div>
</router-link>
</div>
</div>
</q-drawer>
</template>

I’m not sure how I would add a method in the component to open it from the click of the button within the App.vue above?

What if I have a custom component that I place the q-drawer component into and then import that custom component to my App.vue. From within my App.vue file how do I have the button there open the drawer that is within my imported custom component?