title: Populate select tag with data from API in Vue and Axios
body: <p>I want to populate <em>select tag</em> with data from api get request. Here is my html code</p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;label for="country" class="control-label"&gt;Country&lt;/label&gt;
      &lt;select v-model="selectedCountry" @change="onChangeCountry" name="country" id="country" class="form-control" tabindex="11"&gt;
          &lt;option selected disabled value=""&gt;Please select one&lt;/option&gt;
          @foreach($countries as $country)
              &lt;option value="{{ $country-&gt;id }}"&gt;{{ $country-&gt;name }}&lt;/option&gt;
          @endforeach
      &lt;/select&gt;
      &lt;label for="city" class="control-label"&gt;City&lt;/label&gt;
      &lt;select v-model="cities" name="city" id="city" class="form-control" tabindex="12"&gt;
          &lt;option v-bind:value="city.id"&gt;@{{ city.name }}&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And now my JavaScript code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      new Vue({
        el: '#app',
        data: {
          selectedCountry: '',
          cities: []
        },
        methods: {
            onChangeCountry: function (event) {
              axios.get('http://localhost:8000/api/cities/country/' + this.selectedCountry)
              .then(function (
                  this.cities = response.data
              }).catch(function(error) {
                  console.log('an error occured ' + error);
              });
            }
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm pretty sure that the data is received because i did a lot of console.log but I don't know how to append the received data to my second select tag nor how to proceed.</p>