Vue js在第一次选择已更改时动态填充第二个选择

Question

我正在使用Laravel刀片和Vue js 2.我正在尝试执行一项简单的任务：首次选择更改时填充辅助选择。当然有axios电话。这是HTML部分：

<div class="content" id="app">
    <select v-model="selected" @change="onChange">
        <option value="" disabled selected>Please Select the Attraction</option>
    @foreach($pkgs as $pkg)
        <option value="{{$pkg->id}}">{{$pkg->name}}</option>
    @endforeach
    </select>
    <select v-model="selected2">
        <option v-for="subpackage in subpackages" v-bind:value="subpackage.id">@{{ subpackage.name }}</option> 
    </select>
</div>

这是js部分：

new Vue({
    el: '#app',
    data: {
        selected: '',
        selected2: '',
        subpackages: [
            {id:'', name:'Please select an attraction first'}
        ]
    },
    methods: {
        onChange:function(){
            axios.get("{{route('pos.ajaxGetPkg')}}", {
                params:{
                    pkg_id: this.selected
                }
              })
            .then(function(response){
                this.subpackages = [];
                this.subpackages = response.data.variants;
                console.log(this.subpackages);
            })
            .catch(e => {
              //...
            })
        }
    }
});

在控制台中，我可以看到收到的对象像

一样被转储

0:{id: 14, name: "Adult", price: "45.00"}

然而，select2提醒不变