title: VueJS 2: Modify select options by other select elements
body: <p>I have four <code>select</code> elements in my template.  The options for each subsequent element are supposed to change based on the preceding selection.  So for instance, if you choose 'Toyota' from the 'Car' <code>select</code>, the next  should show only Toyota models.  I tried setting this up, but the AJAX request repeats the call forever.  What's the best pattern for this kind of form?</p>
  
  <p>Here's an example of what I have in the template:</p>
  
  <pre><code>&lt;select v-model="selected.car" :change="getModels()"&gt;
      &lt;option v-for="car in cars" value="car.id"&gt;{{ car.name }}&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select v-model="selected.model" :change="getYear()"&gt;
      &lt;option v-for="model in models" :value="model.id"&gt;{{ model.name }}&lt;/option&gt;
  &lt;/select&gt;
  
  ...
  </code></pre>
  
  <p>and the javascript:</p>
  
  <pre><code>methods: {
  
     getModels() {
         axios.get('/api/models/'+this.selected.car).then(resp =&gt; {
             this.models = resp.data;
     }
  
    ...    
  }
  </code></pre>
  
  <p>So what would be the best pattern here?</p>