title: Dynamically add back arrow on Vuetify's v-toolbar component
body: <p>I am working on a project, and in some views I would need to add the back arrow to go back to the previous vue-router view. </p>
  
  <p>So far, I have created a separate component for the toolbar and I load it in the main App component, because all the screens will have that layout.</p>
  
  <p>I tried now to load the toolbar component in each view, passing a prop to establish if the arrow should be there or not and visualizing it with v-if like this:</p>
  
  <p><strong>Toolbar template</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;v-toolbar color="amber" app&gt;
      &lt;v-btn v-if="backArrow" icon class="hidden-xs-only"&gt;
        &lt;v-icon&gt;arrow_back&lt;/v-icon&gt;
      &lt;/v-btn&gt;
      &lt;v-toolbar-title&gt;Babbelbord&lt;/v-toolbar-title&gt;
      &lt;v-spacer&gt;&lt;/v-spacer&gt;
      &lt;v-btn icon to="/"&gt;
        &lt;v-icon&gt;home&lt;/v-icon&gt;
      &lt;/v-btn&gt;
      &lt;v-btn icon&gt;
        &lt;v-icon&gt;settings&lt;/v-icon&gt;
      &lt;/v-btn&gt;
    &lt;/v-toolbar&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p><strong>Passing the prop to visualize the arrow</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;page-header backArrow="true"&gt;&lt;/page-header&gt;
      ....
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>This actually works, however given the limitation that all template's code must be within a unique container element, my toolbar now doesn't cover the whole lenght of the screen anymore. </p>
  
  <p>Any other suggested approach for this issue?</p>