VueJS data bind related - data-binding

Question

I use vueJS to display a table data,when I click the delete button, the table always delete the last row,rather not a specific row.I use my custom UIComponent 'lovTable',it changes a input element to another style,how to avoid it and make the data and page change the same way.Here's the code.Tks.
<script>
//服务类型下拉列表数据转化
var mServiceTypeData = $.map(serviceTypeData, function (obj) {
obj.id = obj.value;
obj.text = obj.meaning;
return obj;
});
$(function(){
var vm = new Vue({
el: '#div-rms-memo',
data: {
sub:[]
},
methods:{
//添加子项目
addSubProject:function () {
vm.sub.push({
subPrjServeType:'',
subPrjBelongToDept:'',
});
},
//移除当前行的子项目
removeCurrentRow:function(index){
var $del=vm.sub.splice(index,1);
},
}
});
function renderLines(el, lineIndex){
//渲染select2
$("#subPro"+lineIndex).find(".subPrjServeType").select2Ext({
placeholder: '请选择服务类型',
data: mServiceTypeData,
width:150
}).on('change', function () {
vm.sub[lineIndex].subPrjServeType = $(this).val();
});
//归属部门LOV
$("#subPro"+lineIndex).find(".subPrjBelongToDept").lovTable({
title:'归属部门',
placeholder:'请选择',
valueField:'unitId',
textField:'unitName',
query:[
{
text:'部门ID',
name:'unitId'
},
{
text:'部门名称',
name:'unitName'
}
],
rowSelected:function(row){
vm.sub[lineIndex].subPrjBelongToDept=row.unitId;
},
textClear:function(){
vm.sub[lineIndex].subPrjBelongToDept = "";
}
},{
url : '${base.contextPath}/project/prjBranchView/queryConditionPage?'+_header+'='+_token,
columns: [{
title:'部门ID',
field:'unitId'
},{
title:'部门名称',
field:'unitName'
}]
});
}
Vue.directive('line-bind', {
bind: function (el, binding) {
var lineIndex = binding.value;
console.info('binding index='+lineIndex)
vm.$nextTick(function () {
renderLines(el,lineIndex);
})
},
unbind:function(el,binding){
vm.$nextTick(function () {
for(var i=0;i<vm.sub.length;i++){
renderLines(vm.sub[i],i);
}
})
}
});
})
</script>
<div class="content-wrapper">
<section class="content">
<div id="div-rms-memo" >
<div class="box box-blue">
<div class="form-group">
<a href="javascript:void(0)" class="btn btn-crm" v-on:click="addSubProject">
<span class="glyphicon glyphicon-plus">添加</span>
</a>
</div>
<table align="center" class="table table-bordered" v-line-bind="index" v-for="(el,index) in sub" :id="'subPro'+index" :cindex="index">
<tr class="crm-title">
<td align="center" valign="middle" rowspan="2" style="width:5%;">
<a href="javascript:void(0)" class="btn btn-default btn-xs removeSubPrj" id="removeSubPrjBtn" v-on:click="removeCurrentRow(index)">
<span class="glyphicon glyphicon-minus"></span>
</a>
</td>
<td align="center" style="width:15%;"class="required">服务类型</td>
<td align="center" style="width:15%;"class="required">归属部门</td>
<td align="center" style="width:15%;" class="required">人天</td>
</tr>
<tr>
<td align="center">
<input type="text" id="subPrjServeType" v-model="el.subPrjServeType" class="form-control input-sm subPrjServeType"/>
</td>
<td align="center">
<input type="text" class="form-control input-sm subPrjBelongToDept" v-model="el.subPrjBelongToDept">
</td>
<td align="center">
<input type="number" class="form-control input-sm subPrjPeoplePerDay" v-model="el.subPrjPeoplePerDay">
</td>
</tr>
</table>
</div>
</div>
</section>
</div>