Drawer not opening and closing properly

Steps to reproduce

1. Create a template based on Vuetify Pre-defined template
2. Set responsive and simple data variables for the Navigation Drawer component
3. Add button to open and close drawer
4. Evaluate button behavior on desktop: works as expected
5. Resize window until below md to sm breakpoint (1024px)
6. Reevaluate button behavior on mobile size: overlay shows without corresponding close action, and drawer does not open.

Versions

• Vue: v2.3.4
• Vuetify: v0.12.7
• OS: Windows 10 & Linux Ubuntu
• Browser: Chrome@latest & Chromium@latest

What is expected ?

Navigation drawer should open and close when clicking on menu button, and overlay/backdrop should also close drawer when clicked.

What is actually happening ?

After resizing screen, when on mobile-sized screen, the drawer stops behaving accordingly by not opening when v-model value changes. It only shows an action-less overlay/backdrop.

Reproduction Link

https://codepen.io/matheusgrieger/full/MopOXw/

[bretonio]

I did finally get your gist.

<script>
  export default {
    data () {
      return {
        drawer: false,
        dialog: false
      }
    }
  }
</script>

And now both drawer and dialog are working on my page. Thanks again.

[matheusgrieger]

According to the message, be sure that you have declared drawer in your component’s data, like:

export default {
  data() {
    return {
      drawer: false
    }
  }
}