title: Vuetify create 2 related v-select
body: <p>Are there any ways onchange Alist v-select, base on Alist item to ajax, and apply the result to Blist items looping? That is what I have done for the integration. But it shows: <code>Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: &quot;items&quot;</code></p>
  <pre><code>&lt;tr v-for=&quot;(item, index) in list&quot; :key=&quot;index&quot;&gt;
  &lt;td&gt;
      &lt;v-select style=&quot;width: 250px&quot; :items=&quot;Alist&quot; label=&quot;Purchase Order&quot; @change=&quot;updateBlist(index, $event)&quot;&gt;&lt;/v-select&gt;
  &lt;/td&gt;
  &lt;td&gt;
      &lt;v-select style=&quot;width: 250px&quot; :ref=&quot;'Blist'+index&quot; :items=&quot;Blist&quot; label=&quot;Group Tasks&quot;&gt;&lt;/v-select&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;script&gt;
  export default {
      data() {
          Blist: [],
          Alist: [],
      },
      methods: {
          updateBlist(index, value) {
              // Get Group Task List
              axios
                  .get(&quot;/api/Blist/list/&quot; + value)
                  .then((resp) =&gt; {
                      this.$refs.[`Blist${index}`][0].items = [];
                      _.forEach(resp.data.data, (value, key) =&gt; {
                          var tmp = {
                              text: value.name,
                              value: value.uuid,
                          };
                          this.$refs.[`Blist${index}`][0].items.push(tmp);
                      });
                  });
          }
      }
  }
  &lt;/script&gt;
  
  </code></pre>