title: Vue.js/Vuetify - Filter select data based on another select choice
body: <p>How can I filter data to populate one select based on the choice of another select? Something like, I choose an state from one select and a second select is loaded with all cities from that specific state.
  I'm using vue.js and vuetify as framework (with v-select component). I've tried to set a computed property, but even when I choose from first select, the second one doesn't load data.</p>
  
  <p>HTML</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.use(Vuetify);
  
  var app = new Vue({
    el: '#app',
    data() {
      return {
        items: {
          home_id: null,
        },
        support: {
          home_province: '',
        },
        options: {
          opt_province: [{
            text: 'British Columbia',
            value: 1
          }, {
            text: 'Ontario',
            value: 2
          }],
          opt_city: [{
            text: 'Vancouver',
            value: 1,
            dependency: 1
          }, {
            text: 'Surrey',
            value: 1,
            dependency: 1
          }, {
            text: 'London',
            value: 1,
            dependency: 2
          }, {
            text: 'Toronto',
            value: 1,
            dependency: 2
          }]
        }
      }
    },
    computed: {
      filteredData() {
        var city = this.options.opt_city;
        var province = this.support.home_province;
        for (var i = 0; i &lt; city.length; i++) {
          if (city[i].dependency != province.value) {
            city.splice(i);
          }
        }
        return city;
      },
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/vue@2.4.1/dist/vue.js"&gt;&lt;/script&gt;
  &lt;link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://unpkg.com/vuetify/dist/vuetify.min.js"&gt;&lt;/script&gt;
  &lt;link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css"&gt;
  &lt;div id="app"&gt;
    &lt;v-app&gt;
      &lt;v-card class="grey lighten-4 elevation-0"&gt;
        &lt;v-card-text&gt;
          &lt;v-container fluid&gt;
            &lt;v-layout row wrap&gt;
              &lt;v-flex xs4&gt;
                &lt;v-flex&gt;
                  &lt;v-subheader&gt;Origin Province&lt;/v-subheader&gt;
                &lt;/v-flex&gt;
                &lt;v-flex&gt;
                  &lt;v-select :items="options.opt_province" v-model="support.home_province" label="Select" class="input-group--focused" single-line&gt;
                  &lt;/v-select&gt;
                &lt;/v-flex&gt;
              &lt;/v-flex&gt;
              &lt;v-flex xs4&gt;
                &lt;v-flex&gt;
                  &lt;v-subheader&gt;Origin City&lt;/v-subheader&gt;
                &lt;/v-flex&gt;
                &lt;v-flex&gt;
                  &lt;v-select :items="filteredData" v-model="items.home_id" label="Select" class="input-group--focused" single-line autocomplete&gt;
                  &lt;/v-select&gt;
                &lt;/v-flex&gt;
              &lt;/v-flex&gt;
            &lt;/v-layout&gt;
          &lt;/v-container&gt;
        &lt;/v-card-text&gt;
      &lt;/v-card&gt;
    &lt;/v-app&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here it is jsfiddle link: <a href="https://jsfiddle.net/vcmiranda/tkkhwq6m/" rel="noreferrer">https://jsfiddle.net/vcmiranda/tkkhwq6m/</a></p>
  
  <p>Thanks. </p>