vue js how to set option value selected

Question

I'm using vue js for my application in select option input..I need to set default value should be selected in the drop down and while on change i would like to call two functions ..

I'm new to vue js..

My Code :

var listingVue = new Vue({

el: '#mountain',

data:{
        formVariables: { 
            country_id: '',
            mountain_id: '',
            peak_id: ''
        },
        countrylist:[],
        mountainlist:[],

},         

ready: function() {

    var datas = this.formVariables;
    this.getCountry();     

},

methods: {

    getCountry: function()
        {

            this.$http.get(baseurl+'/api/v1/device/getCountry',function(response)
            {
                this.$set('countrylist',response.result);      

                //alert(jQuery('#country_id').val());              
            });
        },
    getMountain: function(country_id)
        {
            var datas = this.formVariables;
            datas.$set('country_id', jQuery('#country_id').val() );
            postparemeters = {country_id:datas.country_id};
            this.$http.post(baseurl+'/api/v1/site/getMountain',postparemeters,function(response)
            {
                if(response.result)
                    this.$set('mountainlist',response.result);
                else
                    this.$set('mountainlist','');
            });
        },  

});

 <select 
                    class="breadcrumb_mountain_property" 
                    id="country_id" 
                    v-model="formVariables.country_id" 
                    v-on="change:getMountain(formVariables.country_id);">
                <option 
                  v-repeat = "country: countrylist" 
                  value="@{{country.id}}" >
                  @{{country.name}}
                </option>
            </select>

Answer 1

With vue 2, the provided answer won't work that well. I had the same problem and the vue documentation isn't that clear concerning <select>. The only way I found for <select> tags to work properly, was this (when talking of the question):

<select v-model="formVariables.country_id">
  <option v-for = "country in countrylist" :value="country.id" >{{country.name}}</option>
</select>

I assume, that the @-sign in @{{...}} was due to blade, it should not be necessary when not using blade.

Answer 2

In VueJS 2 you can bind selected to the default value you want. For example:

 <select 
   class="breadcrumb_mountain_property" 
   id="country_id" 
   v-model="formVariables.country_id" 
   v-on:change="getMountain(formVariables.country_id);">
   <option 
       v-for = "country in countrylist"
       :selected="country.id == 1"
       :value="country.id" >
       {{country.name}}
   </option>
 </select>

So, during the iteration of the countryList, the country with the id 1 will be selected because country.id == 1 will be true which means selected="true".

UPDATED: As Mikee suggested, instead of v-on="change:getMountain(formVariables.country_id);" there is a new way to for binding events. There is also a short form @change="getMountain(formVariables.country_id);"