vue+element 动态添加一项下拉框

<el-form-item label="请选择：" prop="region">
   <div style="display: flex;justify-content: space-between;margin-bottom: 16px;" v-for="(i, index) in model.region" :key="index">
         <el-select v-model="i.title" style="width: 150px;">
             <el-option
                v-for="(item, index) in customerOption"
                :key="index" 
                :label="item.name"
                :value="item.id">
             </el-option>
         </el-select>
         <el-button v-if="index == model.region.length - 1" @click="addArea">添加</el-button>
         <el-button v-else type="danger" @click="delArea(index)">删除</el-button>
    </div>
</el-form-item>

data(){
    return {
        model: {
           region: [{ title: "" }]
        },
        customerOption:[]
    }
},
methods: {
    addArea(){
       this.model.region.push({ title: "" })
    },
    delArea(index){
       this.model.region.splice(index, 1)
    },
}