How to add data to vue.js model after ajax request?

Question

JavaScript

here is the html code

<select class="selectpicker" name="car[automodel_id]"  disabled  title="{{Lang::get('nav.car_model')}}">
      <option v-for="models in models" value="@{{model.id}}">@{{model.title}}</option>
</select>

and vue.js code

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="_token"]').getAttribute('content');

new Vue({
    el      : 'nav',
    data    :{
        models  : [],       
    },
    methods :{
     
        brands : function ( e ) {

            this.$http.post(Website.href + 'cars/models/' + e.target.value, function (obj){
                this.models = obj.models;
            });
        }
    }
});

the task is to display the data in the select after response

Answer 1

It can be like this:

methods :{    
        brands : function ( e ) {
          var vue = this;
            this.$http.post(Website.href + 'cars/models/' + e.target.value, function (obj){
                vue.models = obj.models;
            });
        }
    }

Answer 2

1. You will have this either undefined or window (depending on the strictness of the mode), but certainly not a vue instance.
2. Mutating collections in vue is better with operations on the original array, rather than replacing the property completely.