title: Bind drawer state in Vuetify when nav-drawer and app-bar is different components
body: <p>now i have two components in my Dashboard:</p>
  
  <p><strong>Dashboard</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;v-app&gt;
          &lt;Toolbar :drawer="app.drawer"&gt;&lt;/Toolbar&gt;
          &lt;Sidebar :drawer="app.drawer"&gt;&lt;/Sidebar&gt;
      &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import Sidebar from './components/layouts/Sidebar'
      import Toolbar from './components/layouts/Toolbar'
      import {eventBus} from "./main";
      import './main'
  
      export default {
          components: {
              Sidebar,
              Toolbar,
          },
          data() {
              return {
                  app: {
                      drawer: null
                  },
              }
          },
          created() {
              eventBus.$on('updateAppDrawer', () =&gt; {
                  this.app.drawer =  !this.app.drawer;
              });
          },
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Sidebar</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;v-navigation-drawer class="app--drawer" app fixed
                               v-model="drawer"
                               :clipped="$vuetify.breakpoint.lgAndUp"&gt;
          &lt;/v-navigation-drawer&gt;
     &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import {eventBus} from "../../main";
  
      export default {
          props: ['drawer'],
  
          watch: {
              drawer(newValue, oldValue) {
                  eventBus.$emit('updateAppDrawer');
              }
          },
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Toolbar</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;v-app-bar app&gt;
          &lt;v-app-bar-nav-icon v-if="$vuetify.breakpoint.mdAndDown"
                              @click="updateAppDrawer"&gt;
          &lt;/v-app-bar-nav-icon&gt;
      &lt;/v-app-bar&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import {eventBus} from "../../main";
  
      export default {
          props: ['drawer'],
  
          methods: {
              updateAppDrawer() {
                  eventBus.$emit('updateAppDrawer');
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>So now i have an infinite loop because when i press on icon in app-bar - <code>watch</code> in Sidebar, Sidebar understanding it like changes and starts a loop, updating drawer value in Dashboard, then Sidebar
   catching changes in <code>watch</code> and starts new loop.
  Also i have this warning, but it is another question. </p>
  
  <blockquote>
    <p>[Vue warn]: Avoid mutating a prop
    directly since the value will be overwritten whenever the parent
    component re-renders. Instead, use a data or computed property based
    on the prop's value. Prop being mutated: "drawer"</p>
  </blockquote>
  
  <p>Thanks.</p>