title: How to call a function on selection change in v-select?
body: <p>I am currently working on Vuetify, trying to call a method in <code>Vue.js</code> from v-select using HTML. But the @change event is not properly selecting the conditions.</p>
  
  <pre><code>&lt;v-layout row wrap&gt;
      &lt;v-flex xs12 sm4&gt;
        &lt;!-- DropDown Combo --&gt;
        &lt;v-select v-model="selected"
          :items='dropdown_tables'
          append-icon='fa-angle-down'
          label='Select'
          persistent-hint
          return-object
          single-line
          @change='RefreshGrid'
          target='#dropdown'&gt;
          &lt;/v-select&gt;
          &lt;!-- &lt;p&gt; {{`${selected}`}} &lt;/p&gt; // this code gives the selected combo text --&gt;
      &lt;/v-flex&gt;
     &lt;/v-layout&gt;
  &lt;/v-container&gt;
  </code></pre>
  
  <p><strong>My Javascript function</strong> </p>
  
  <pre><code> methods: {
     RefreshGrid: function () {
     let cName;
     if (this.selected === 'Business Area') {
      cName = 'businessArea';
     } else if (this.selected === 'Council') {
       cName = 'council';
     }
     let obj = {
      vm: this,
      collectionName: cName,
      action: 'masterData/setMasterData',
      mutation: 'setMasterData'
     };
     this.$store.dispatch(obj.action, obj);
   }
  </code></pre>
  
  <p>So when I use on change, and click on council it shows businessArea data in grid and vice versa. Trying to figure out how the indexing of v-select works.</p>