title: Vue js populate new selects when changing the main one
body: <p>I need your help about populating or loading new select with vue js, I know how to do this with jquery but in vue i don't know how because i'm new with this library.</p>
  
  <p>i have the main select :</p>
  
  <pre><code>&lt;select&gt;
     &lt;option value='3'&gt;FRANCE&lt;/option&gt;
     &lt;option value='5'&gt;USA&lt;/option&gt;
     &lt;option value='6'&gt;CANADA&lt;/option&gt;
     &lt;option value='8'&gt;MOROCCO&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I want that if i choose FRANCE i get a select of FRANCE cities from database, and also when i select USA i get an other select of USA cities from database.</p>
  
  <p>So for example i will get :</p>
  
  <pre><code>&lt;select&gt;
     &lt;option value='6'&gt;CANADA&lt;/option&gt;
     &lt;option value='8'&gt;MOROCCO&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select&gt;
     &lt;option value='34'&gt;France city one&lt;/option&gt;
     &lt;option value='35'&gt;France city two&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select&gt;
     &lt;option value='3'&gt;Usa city one&lt;/option&gt;
     &lt;option value='5'&gt;Usa city two&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>When choosing France and USA i will populate select of cities with an array </p>
  
  <p>I appreciate any help, I don't realy know how can i do this with vue js, 
  I don't want add all select of cities in my html because i don't know how much countries i have.</p>
  
  <p>I tried this but this not resolve my probleme :</p>
  
  <pre><code>const addProduct = new Vue({
  el: '#addProduct',
  data: {
      name: '',
      name_url: '',
      cities: '',
      countries: [],
      range: 0
  },
  created: function () {
      this.$http.get('/api/countries').then(response =&gt; {
          this.countries = response.data
      }, response =&gt; {
  
      });
  },
  methods: {
      addForm: function(val, data) {
          this.range += 1;
          alert(this.range)
  
          var index = _.findIndex(this.countries,{city_id: val});
          this.countries.splice(index, 1)
      }
  },
  watch: {
      'cities' (val, oldVal) {
          this.$http.post('/api/cities/values', {city_id:val}).then(response =&gt; {
              this.addForm(val, response.data);
          }, response =&gt; {
  
          });
      }
  }
  </code></pre>
  
  <p>});</p>
  
  <p>in html :</p>
  
  <pre><code>&lt;div class="uk-grid" data-uk-grid-margin&gt;
      &lt;div class="uk-width-medium-1-4"&gt;
          &lt;label for="attribute"&gt;Countries&lt;/label&gt;
          &lt;md-select name="country" id="country" v-model="country"&gt;
              &lt;md-option v-for="country in countries" :value="country.country_id"&gt;@{{ country.name }}&lt;/md-option&gt;
          &lt;/md-select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="uk-grid" data-uk-grid-margin&gt;
      &lt;my-cities v-for="n in range"&gt;&lt;/my-cities&gt;
  &lt;/div&gt;
  
  &lt;script type="x-template" id="my-cities"&gt;
      &lt;div class="uk-width-medium-1-4"&gt;
          &lt;label for="attr"&gt;Cities&lt;/label&gt;
          &lt;md-select name="attr" id="attr" v-model="attr"&gt;
              &lt;md-option value=""&gt;Select &lt;/md-option&gt;
              &lt;md-option value="val in values"&gt;Select&lt;/md-option&gt;
          &lt;/md-select&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>an example like this on Jsfiddle : <a href="http://jsfiddle.net/pu8pp62v/3/" rel="nofollow noreferrer">http://jsfiddle.net/pu8pp62v/3/</a></p>