Why does the Vuetify navigation drawer fly out at large screen size? How do I prevent it from happening?

Question

I have the following Vuetify toolbar with a navigation drawer. This my first attempt at building a Vue app with Vuetify At smaller screen sizes it behaves as expected. Once the screen width hits the large breakpoint (1264 px), the drawer flys out. Using Chrome Version 72.0.3626.109 (Official Build) (64-bit)

I can't find any reference to this being expected behavior in the docs let alone how to prevent it. Is there a simple way to stop this behavior?

My app.vue

<template>
  <v-app>
    <v-navigation-drawer v-model="sidebar" app>
    </v-navigation-drawer>
    <v-toolbar height=48 app>
      <v-toolbar-side-icon class="hidden-sm-and-up" @click="sidebar = !sidebar">
      </v-toolbar-side-icon>
      <v-toolbar-title>{{ appTitle }}</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-xs-only">
        <v-btn to="/" flat>Home</v-btn>
        <v-btn to="/about" flat>About</v-btn>
      </v-toolbar-items>
    </v-toolbar>
    <v-content>
      <router-view/>
    </v-content>
  </v-app>
</template>
<script>
  export default {
    data () {
      return {
        appTitle: 'VueTodo',
        sidebar: false
      }
    }
  }
</script>
<style>
</style>

Answer 1

There is a prop to handle this exact behaviour disable-resize-watcher:

<v-navigation-drawer disable-resize-watcher v-model="sidebar" app>
</v-navigation-drawer>

https://vuetifyjs.com/en/components/navigation-drawers

Answer 2

Try those changes:

<v-navigation-drawer v-model="sidebar" app temporary>
<v-toolbar-side-icon @click="sidebar = !sidebar">

Also you can check the documentation about it here: https://vuetifyjs.com/en/components/navigation-drawers#props