title: Wait for a function to complete (axios call) before opening v-dialog
body: <p>Currently, when a button is clicked, an axios call will retrieve some information about a particular product and open, <strong>AT THE SAME TIME</strong>, a <code>v-dialog</code> showing all the information about the product.</p>
  <p>The behavior I would like would rather be that the <code>v-dialog</code> opens <strong>ONLY AFTER</strong> the axios call is completed. I know that async functions would be usefull here, but the fact that the same button call the <code>axios</code> function AND opens the <code>v-dialog</code> is what's confusing me here.</p>
  <p>Here's my code in template:</p>
  <pre><code>&lt;v-dialog v-model=&quot;productInfoDialog&quot; max-width=&quot;600px&quot; :retain-focus=&quot;false&quot;&gt;
                  &lt;template v-slot:activator=&quot;{ on, attrs }&quot;&gt;
                    &lt;v-btn color=&quot;primary&quot; v-bind=&quot;attrs&quot; v-on=&quot;on&quot; v-on:click=&quot;getProductInfo(row.item.id)&quot;&gt;View Product&lt;/v-btn&gt;
                  &lt;/template&gt;
                  ...dialog content
                &lt;/v-dialog&gt;
  </code></pre>
  <p>In script:</p>
  <pre><code>closeDialog() {
        this.productInfoDialog = false;
  },
  getProductInfo(id) {
        var url = this.$store.getters.URLs.Product.url;
        axios.get(url, {
        params: this.getProductParams(id),
        })
        .then((response) =&gt; {
          //product info assignment
        })
        .catch((error) =&gt; {
          console.log(error.response);
        })
  },
  </code></pre>
  <p>Thanks in advance for your help! :)</p>