title: How to programmatically launch a Vuetify Dialog and wait for the response
body: <p>I'm fairly new to Vue.js and Vuetify (used AngularJS for several years but our company is switching to Vue.js). What I'm trying to accomplish is when the user clicks on a 'sign in' button it does some checks (i.e. username cannot be blank) and launches a Vuetify Dialog to alert the user. I know Vuetify has some built in validation but looking for something a little more robust where I can wait for a reponse (i.e. when I need to wait for something like can I use your history / location).</p>
  
  <p>Basically looking to do:</p>
  
  <pre><code>if (!userName){
      userName = await mbox('You must Enter your Username');
      return
  }
  </code></pre>
  
  <p>OR</p>
  
  <pre><code>var mProceed = await mbox('Can we use your location for awesome stuff?');
  </code></pre>
  
  <p>where mbox (a simple messagebox popup box) is a function that returns a promise, programmatically loads a vue component, adds it to the dom, and waits for the response.</p>
  
  <p><a href="https://i.stack.imgur.com/VUFAm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VUFAm.png" alt="Exmple Dialog Screen Shot"></a></p>
  
  <p>i.e.</p>
  
  <pre><code>async function mbox (mText) {
      // load dialog component here and set message passed in
      // How Do I load the template / wait for it?
      return dialogResult
  
  }
  </code></pre>
  
  <p>Vue Component would look something like (With button captions and text being variables I pass in to my mbox function):</p>
  
  <pre><code>&lt;template&gt;
  &lt;v-layout row justify-center&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="dialog = false"
        &gt;
          Disagree
        &lt;/v-btn&gt;
  
        &lt;v-btn
          color="green darken-1"
          flat="flat"
          @click="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;
  </code></pre>
  
  <p>I'm fine editing the template / adding the script for the vue component I'm just not sure how to have it called via a method that returns a promise and waits for the response?</p>