navigation-drawer does not work properly by setting some properties(v-model, mini-variant, temporary)

Steps to reproduce

I created a test app using webpack-advanced from vuetifyjs github and slightly modified some behavior provided by the template as the code below. By resizing the window, temporary, v-model and min-variant properties would be altered. But sometimes, drawer does not work properly (please refer to the gif below) You can tell background became darken and disabled even the drawer was in hidden status. I tried to dump the properties status, all of them were correct. Also tried to set the properties(temoporary, v-model, mini-variant) under console using vue dev tools, did not work at all.

http://i.imgur.com/VQOJ525.gif

<template>
  <v-app dark>
    <v-navigation-drawer
      persistent
      :mini-variant="miniVariant"
      :clipped="clipped"
      :temporary="temporary"
      v-model="drawer"
    >
      <v-list>
        <v-list-item
          v-for="(item, i) in items"
          :key="i"
        >
          <v-list-tile value="true">
            <v-list-tile-action>
              <v-icon light v-html="item.icon"></v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title v-text="item.title"></v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar light>
      <v-toolbar-side-icon @click.native.stop="toggleDrawer" light></v-toolbar-side-icon>
      <!--<v-toolbar-side-icon @click.native.stop="drawer = !drawer" light></v-toolbar-side-icon>
      <v-btn
        icon
        light
        @click.native.stop="miniVariant = !miniVariant"
      >
        <v-icon v-html="miniVariant ? 'chevron_right' : 'chevron_left'"></v-icon>
      </v-btn>
      <v-btn
        icon
        light
        @click.native.stop="clipped = !clipped"
      >
        <v-icon>web</v-icon>
      </v-btn>-->
      <v-toolbar-title v-text="title"></v-toolbar-title>
      <v-spacer></v-spacer>
    </v-toolbar>
    <main>
      <v-container fluid>
        <v-slide-y-transition mode="out-in">
          <v-layout column align-center>
            <img src="/static/v.png" alt="Vuetify.js" class="mb-5" />
            <blockquote>
              &#8220;First, solve the problem. Then, write the code.&#8221;
              <footer>
                <small>
                  <em>&mdash;John Johnson</em>
                </small>
              </footer>
            </blockquote>
          </v-layout>
        </v-slide-y-transition>
      </v-container>
    </main>
    <v-footer :fixed="fixed">
      <span>&copy; 2017</span>
    </v-footer>
  </v-app>
</template>

<script>
function isMobile () {
  return window.innerWidth < 993
}
export default {
  data () {
    const mobile = isMobile()

    return {
      clipped: true,
      drawer: true,
      miniVariant: false,
      temporary: mobile,
      fixed: false,
      items: [
        { icon: 'bubble_chart', title: 'Inspire' }
      ],
      title: 'Vuetify.js'
    }
  },
  mounted () {
    window.addEventListener('resize', this.onResize)
  },
  destroyed () {
    window.removeEventListener('resize', this.onResize)
  },
  methods: {
    toggleDrawer () {
      let mobile = isMobile()

      if (mobile) {
        this.drawer = !this.drawer
        this.miniVariant = false
      } else {
        this.drawer = true
        this.miniVariant = !this.miniVariant
      }
    },
    onResize () {
      const mobile = isMobile()

      if (mobile) {
        if (this.drawer && this.miniVariant) {
          this.drawer = false
        }
        this.miniVariant = false
      } else {
        if (!this.drawer) {
          this.miniVariant = true
        }
        this.drawer = true
      }
      this.temporary = mobile
    }
  }
}
</script>

<style lang="stylus">
@import '../node_modules/vuetify/src/stylus/main'
</style>

Versions

Chrome stable 58 Vue 2.3.3 VuetifyJS 0.12.4

What is expected ?

Background shouldn’t be darken or disabled while drawer is not shown.

What is actually happening ?

as descbie at the beginning

Reproduction Link

[johnleider]

The resize functionality has been moved to a prop, enable-resize-watcher

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord