title: Open a Vuetify dialog from a component template in VueJS
body: <p>I'm using the VueJS <a href="https://vuetifyjs.com/" rel="noreferrer">Vuetify framework</a> and I need to open a dialog - that gets imported as a component template - from another template. Once the <strong><em>Menu</em> button</strong> in <strong>App.vue</strong> got clicked, the Modal should open.
  Here is my setup:</p>
  
  <ul>
  <li>App.vue = navigation template with Menu button</li>
  <li>Modal.vue = Modal template, imported as global in main.js</li>
  </ul>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>import Modal from './components/Modal.vue'
  Vue.component('modal', Modal)
  </code></pre>
  
  <p><strong>Modal.vue Template:</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;v-layout row justify-center&gt;
      &lt;v-btn color="primary" dark @click.native.stop="dialog = true"&gt;Open Dialog&lt;/v-btn&gt;
      &lt;v-dialog v-model="dialog" max-width="290"&gt;
        &lt;v-card&gt;
          &lt;v-card-title class="headline"&gt;Use Google's location service?&lt;/v-card-title&gt;
          &lt;v-card-text&gt;Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.&lt;/v-card-text&gt;
          &lt;v-card-actions&gt;
            &lt;v-spacer&gt;&lt;/v-spacer&gt;
            &lt;v-btn color="green darken-1" flat="flat" @click.native="dialog = false"&gt;Disagree&lt;/v-btn&gt;
            &lt;v-btn color="green darken-1" flat="flat" @click.native="dialog = false"&gt;Agree&lt;/v-btn&gt;
          &lt;/v-card-actions&gt;
        &lt;/v-card&gt;
      &lt;/v-dialog&gt;
    &lt;/v-layout&gt;
  &lt;/template&gt;
  &lt;script&gt;
    export default {
      data () {
        return {
          dialog: false
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>How to open the dialog?</p>