title: How to manage dialogs in different router-views?
body: <p>I've got a problem with my <code>vue-router</code> and <code>v-dialog</code>s (<strong>vuetify.js</strong> components) inside different <code>router-view</code>s.</p>
  
  <p>My <code>App.vue</code> looks like this:</p>
  
  <pre><code>&lt;template&gt;
    &lt;transition&gt;
      &lt;keep-alive&gt;
        &lt;router-view/&gt;
      &lt;/keep-alive&gt;
    &lt;/transition&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Inside each <code>router-view</code> I have a component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-app&gt;
      &lt;app-header&gt;&lt;/app-header&gt;
      &lt;v-content&gt;&lt;/v-content&gt;
      &lt;app-footer&gt;&lt;/app-footer&gt;
  
      &lt;!-- a couple of dialogs here --&gt;
      &lt;v-dialog v-model="someData.show"&gt;&lt;/v-dialog&gt;
      &lt;v-dialog v-model="anotherData.show"&gt;&lt;/v-dialog&gt;
      &lt;v-dialog v-model="yetAnotherData.show"&gt;&lt;/v-dialog&gt;
    &lt;/v-app&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>When I switch between different <code>router-view</code>s and open dialogs overlay shows, but the dialog doesn't. Except for the <code>router-view</code> which was first loaded with the page.</p>
  
  <p>What seems to be the problem? Does is have something to do with the way I define there routes or components?</p>
  
  <p>You check full code over here: <a href="https://github.com/websanya/gkp7-app/" rel="nofollow noreferrer">https://github.com/websanya/gkp7-app/</a></p>
  
  <p>Please, help!</p>