title: VueJS Material.io Drawer component variable binding
body: <p>Currently I'm learning VueJS and I'm working with <a href="http://vuematerial.io" rel="nofollow noreferrer">http://vuematerial.io</a>.</p>
  
  <p>I have build an application with several pages - each of them contains a sidebar (the drawer component <a href="https://vuematerial.io/components/drawer" rel="nofollow noreferrer">https://vuematerial.io/components/drawer</a>).</p>
  
  <p>Since I don't want to copy and paste the same drawer component code over and over again in each page, I just want to create one sidebar component, which I'll then import on each page.</p>
  
  <p>So far, so good.</p>
  
  <p>This is working fine.</p>
  
  <p>But now - I want to be able to open and close the sidebar.
  Just before, when the component was directly in the page, it was easy - just a variable assignment with a boolean value to whether show or hide the sidebar.
  But now, it seems very hard for me, to synchronize the property over the components.</p>
  
  <p>Let me show you the current new code to clarify what's the problem:</p>
  
  <p>So, this is the page component:</p>
  
  <pre><code>&lt;md-toolbar class="md-primary"&gt;
      &lt;md-button class="md-icon-button" @click="showSidebar=true"&gt;
          &lt;md-icon&gt;menu&lt;/md-icon&gt;
      &lt;/md-button&gt;&lt;span class="md-title"&gt;Dashboard&lt;/span&gt;
  &lt;/md-toolbar&gt;
  &lt;Sidebar v-bind:showSidebar="showSidebar"&gt;&lt;/Sidebar&gt;
  </code></pre>
  
  <p>So that's the Vue Structure - you can see - I want to bind the showSidebar property.
  That's how I'm implementing it within the page</p>
  
  <pre><code>import Sidebar from './sidebar.vue';
  export default {
      data: function () {
          return {
              showSidebar: false
          }
      },
      components: {
          Sidebar: Sidebar
      },
  </code></pre>
  
  <p>And now the Sidebar component itself:</p>
  
  <pre><code>&lt;md-drawer v-bind:md-active.sync="showSidebar"&gt;
  </code></pre>
  
  <p>The sidebar component then fetches the value over a property like this:</p>
  
  <pre><code>export default {
      name: 'sidebar',
      props: ['showSidebar'],
  </code></pre>
  
  <p>And this seems to work!
  I can click on the menu button on the page, set the property to true - and the sidebar shows! Great! But.. When I click outside of this sidebar, this warn message appears - and - furthermore - I can't reopen it again on a new click. It closes, but I can't open it again, until I completely reload the page.</p>
  
  <p>How can I be able to solve that?
  I have also thinked about using events, since the drawer component seems to listen on events, but I wasn't successful.
  That's the current code from the drawer component: <a href="https://github.com/vuematerial/vue-material/blob/dev/src/components/MdDrawer/MdDrawer.vue" rel="nofollow noreferrer">https://github.com/vuematerial/vue-material/blob/dev/src/components/MdDrawer/MdDrawer.vue</a></p>
  
  <p>I hope that it was clear, what my problem is.</p>
  
  <p>I hope, anyone can help me out.</p>
  
  <p>This is my first question here - so please be nice :)</p>
  
  <p>/EDIT:
  Opps, here is the warn message:</p>
  
  <p><code>
  [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: "showSidebar"
  </code></p>