title: How to use vuetify component v-navigation-drawer, toolbar, footer separately in different files
body: <p>I am trying to implement the <code>vuetify</code> in my project. I wanted to separate the 
  <code>&lt;v-navigation-drawer&gt;</code>, <code>&lt;/v-toolbar&gt;</code> and <code>&lt;v-footer&gt;</code> in three different files.</p>
  
  <p>Currently i am using.</p>
  
  <p><strong>Layout.vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;v-app&gt;
      &lt;TopNav :drawer="drawer" :clipped="clipped"&gt;&lt;/TopNav&gt;
          &lt;SideBar/&gt;
          &lt;v-content&gt;
              &lt;v-container fluid&gt;
                  &lt;router-view&gt;&lt;/router-view&gt;
              &lt;/v-container&gt;
          &lt;/v-content&gt;
          &lt;FooterArea/&gt;
      &lt;/v-app&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Script- Layout.vue</p>
  
  <pre><code>&lt;script&gt;
  import { TopNav, FooterArea, SideBar } from "../layouts/index";
  
  export default {
    name: "Full",
    components: {
      TopNav,
      FooterArea,
      SideBar
    },
    data() {
      return {
        clipped: true,
        drawer: true,
        fixed: false,
        inset: true,
        items: [
          {
            icon: "bubble_chart",
            title: "Inspire"
          }
        ],
        miniVariant: false,
        right: true,
        rightDrawer: false,
        title: "Vuetify.js"
      };
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>TopNav.vue</strong></p>
  
  <pre><code>&lt;template&gt;
        &lt;v-toolbar dark color="info" app :clipped-left="clipped"&gt;
        &lt;v-toolbar-side-icon  v-model="drawer" @click.stop="drawer = !drawer"&gt;&lt;/v-toolbar-side-icon&gt;
        &lt;v-toolbar-title class="white--text"&gt;Title&lt;/v-toolbar-title&gt;
      &lt;/v-toolbar&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    props: {
      clipped: {
        type: Boolean,
        default: true
      },
      drawer: {
        type: Boolean,
        default: true
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>SideBar.vue</strong></p>
  
  <pre><code>&lt;template&gt;
     &lt;v-navigation-drawer
        persistent
        :mini-variant="miniVariant"
        :clipped="clipped"
        v-model="drawer"
        enable-resize-watcher
        fixed
        app
        &gt;
        &lt;v-list&gt;
           &lt;v-list-tile
              value="true"
              v-for="(item, i) in items"
              :key="i"
              &gt;
              &lt;v-list-tile-action&gt;
                 &lt;v-icon v-html="item.icon"&gt;&lt;/v-icon&gt;
              &lt;/v-list-tile-action&gt;
              &lt;v-list-tile-content&gt;
                 &lt;v-list-tile-title v-text="item.title"&gt;&lt;/v-list-tile-title&gt;
              &lt;/v-list-tile-content&gt;
           &lt;/v-list-tile&gt;
        &lt;/v-list&gt;
     &lt;/v-navigation-drawer&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
  
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>However have tried by using the props and passing the values from Layout.vue to TopNav.vue, but i am getting the error as:</p>
  
  <p><code>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"</code></p>
  
  <p>As I need to emit from the <code>TopNav.vue</code> to <code>Layout.vue</code> but i couldnot understand how it can be done nicely. </p>
  
  <p>Thank you in advance for the help.</p>