title: How to use v-on:change in VueJS and send the parameter to get update JSON data with axios
body: <p>Please see my code that I'am not sure what I'm doing wrong?.
  I want to get new JSON data when the id="select1" has changed  and then send the parameter to id="select2" and then  id="select2" will be show data in option.</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>var appZone = new Vue({
   el: '#el',
   data() {
    return {
      options: [],
            list:[],
      selected:''
    }
   },
   mounted() {
       var self = this
    axios.get('/wp-json/tour-api/v1/search/0')
    .then(function (response) {
     console.log(response);
      self.options = response.data;
         
    })
    .catch(function (error) {
      console.log(error);
    });
    },
      
    methods: {
           onChange: function (){
             axios.get('/wp-json/tour-api/v1/search/'+this.selected)
              .then(function (response) {
                //console.log(response);
                self.list = response.data;
                console.log(list)
              })
              .catch(function (error) {
                console.log(error);
              });    
           }    
      }
    })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="el"&gt;
      &lt;select id="select1" v-model="selected" class="custom-select" v-on:change="onChange" &gt;
          &lt;option v-for="item in options" v-bind:value="item.id" &gt;
              {{ item.title }}
          &lt;/option&gt;
      &lt;/select&gt;
      &lt;span&gt;Selected: {{ selected }}&lt;/span&gt;
  
      &lt;select id="select2"  class="custom-select" &gt;
          &lt;option v-for="data in list"  v-bind:value="data.country_id"&gt;{{ data.title }}&lt;/option&gt;
      &lt;/select&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>