Html

<div id="app">
  <select v-model="obj.selected" v-for="(obj,key) in selectedArr" @change="select">
    <option v-for="item in obj.optionArr" :value="item.value">{{item.text}}</option>
  </select>
  <p>selectedArr: {{ selectedArr }}</p>
</div>

Js

var vm = new Vue({
  el: '#app',
  data: {
    selectedArr: [{
      selected:'a0',
      optionArr:[
        { text: '10', value: 'a0' },
      	{ text: '20', value: 'b0' },
      	{ text: '30', value: 'c0' }]
    }]
  },
  methods: {
    //獲取當前選中層級
    getCurrentIndex:function(value){
        for(var i=0;i<this.selectedArr.length;i++){
            for(var j=0;j<this.selectedArr[i].optionArr.length;j++){
        	if(this.selectedArr[i].optionArr[j].value === value){
                return i
              }
      	    }
        }
    },
    //模擬新增下一級
    addSelected:function(index){
        this.selectedArr.push({
      	    selected:'a'+index,
      	    optionArr:[
        	{ text: '1'+index, value: 'a'+index },
      		{ text: '2'+index, value: 'b'+index },
      		{ text: '3'+index, value: 'c'+index }
            ]
    	})
    },
    //去除當前選中層級之後的級數
    removeSelected:function(index){
        if( index < this.selectedArr.length ){
            this.selectedArr.splice(index,this.selectedArr.length)
        }
    },
    select:function(e){
        var current = e.target.value;//獲取選中值
        var currentIndex = this.getCurrentIndex(current)+1;//獲取當前層級
        this.removeSelected(currentIndex);
        this.addSelected(currentIndex);
    }
  }
})