title: How to trigger a method at component opening in vuejs?
body: <p>I have a main component that is used to display items using a loop:</p>
  
  <pre><code>&lt;v-list-tile v-for="(item, index) in items" :key="item.title"&gt;
    ...
    &lt;report type="item.type"&gt; &lt;/report&gt;
  &lt;/v-list&gt;
  </code></pre>
  
  <p>The <code>report</code> component is used to report abuse on the system, and report type may vary depending on the <code>item</code> from the parent loop.</p>
  
  <p>As users are very unlikely to use <code>report</code> on a regular basis I would like to only load <code>v-select</code> elements when the Dialog (modal) is opened.</p>
  
  <p>Using <code>created</code> or <code>mounted</code> triggers the loading method everytime the <code>report</code> component is generated and not when the <code>report</code> component is opened.</p>
  
  <p>Is there a smart way to prevent this and only have the loading method within <code>report</code> being triggered only when the component is opened.</p>
  
  <p>=== Report.vue file ===<br>
  === This file is loaded in the parent component</p>
  
  <pre><code>&lt;template lang="html"&gt;
        &lt;v-dialog v-model="dialog" persistent max-width="800px" lazy&gt;
          &lt;v-btn icon slot="activator"&gt;
            &lt;v-icon&gt;error_outline&lt;/v-icon&gt;
          &lt;/v-btn&gt;
          &lt;v-card&gt;
            &lt;v-card-title&gt;
              &lt;div class="headline"&gt;&lt;v-icon large&gt;error_outline&lt;/v-icon&gt; Reporting&lt;/div&gt;
            &lt;/v-card-title&gt;
            &lt;v-card-text&gt;You are about to report the following {{ reportType }}: "&lt;i&gt;{{ reportContent.title }}&lt;/i&gt;"
              &lt;v-container v-if="this.$store.getters['report/getLoadedState']" grid-list-md &gt;
              &lt;v-layout wrap&gt;
                &lt;v-flex xs12 sm12&gt;
                  &lt;v-select
                    label="Select a reason"
                    required
                    cache-items
                    :items="items"
                    item-text="title"
                    item-value="id"
                  &gt;&lt;/v-select&gt;
                &lt;/v-flex&gt;
                &lt;v-flex xs12 sm12&gt;
                  &lt;v-text-field
                    label="Please provide additional information here"
                    multi-line&gt;&lt;/v-text-field&gt;
                &lt;/v-flex&gt;
              &lt;/v-layout&gt;
            &lt;/v-container&gt;
            &lt;v-container v-else grid-list-md&gt;
              &lt;v-layout&gt;
                &lt;v-flex xs12 sm12&gt;
                  Loading
                &lt;/v-flex&gt;
              &lt;/v-layout&gt;
            &lt;/v-container&gt;
            &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="cancel"&gt;Cancel&lt;/v-btn&gt;
              &lt;v-btn color="green darken-1" flat="flat" @click.native="report"&gt;Report&lt;/v-btn&gt;
            &lt;/v-card-actions&gt;
          &lt;/v-card&gt;
        &lt;/v-dialog&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      name: 'report',
      data () {
        return {
          dialog: false,
          items: this.$store.getters['report/getItems']
        }
      },
      props: ['reportType', 'reportContent'],
      methods: {
        cancel () {
          this.dialog = false
        },
  
        report () {
          this.dialog = false
        },
  
        loadReasons (type) {
          if (!this.$store.getters['report/getLoadedState']) {
            this.$store.dispatch('report/setItems', type)
          }
        }
      }
    }
  &lt;/script&gt;
  
  &lt;style lang="css" scoped&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>PS 1: I'm not using JQuery and do not intend to use it<br>
  PS 2: Calling the method outside of the <code>report</code> component is not an option as I want to maximize reusability of this compenent and only pass arguments to it using <code>props</code></p>