title: Vue call method of another component
body: <p>I have two component a Card component and a modal component, the modal component contains the modal Elements, in my Card component I would like to have a button which opens the modal Window of my modal component. How do I manage that, so far I have done this:</p>
  
  <p>My Card component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;v-layout v-if="visible"&gt;
          &lt;v-flex xs12 sm6 offset-sm3&gt;
              &lt;v-card&gt;
                  &lt;v-card-title primary-title&gt;
                      &lt;div&gt;
                          &lt;h3 class="headline mb-0"&gt;test&lt;/h3&gt;
                          &lt;div&gt;test&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/v-card-title&gt;
  
                  &lt;v-divider light&gt;&lt;/v-divider&gt;
  
                  &lt;v-card-actions&gt;
                  &lt;v-btn
                      color="primary"
                      dark
                      @click="dialog = true"
                  &gt;
                  Open Dialog
                  &lt;/v-btn&gt; &lt;!-- open modal dialog of modal component? --&gt;
  
                      &lt;tenant-number-modal&gt;&lt;/tenant-number-modal&gt;
                  &lt;/v-card-actions&gt;
  
                  &lt;input type="hidden" id="tenant-id" :value=tenantId&gt;
              &lt;/v-card&gt;
          &lt;/v-flex&gt;
      &lt;/v-layout&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          data () {
              return {
                  visible: true,
                  dialog: false,
                  uniqueTenantNumber: ''
              }
          },
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>My Modal component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;v-layout row justify-center&gt;
          &lt;v-btn
              color="primary"
              dark
              @click="dialog = true"
          &gt; &lt;!-- this calls the modal but only in this component --&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;test&lt;/v-card-title&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>