list: [
 {
 username: 'aaaaa',
 email: '123@qq.com',
 sex: '男',
 province: '北京市',
 hobby: ['篮球', '读书', '编程']
 },
 {
 username: 'bbbbb',
 email: 'bbbbbbb@163.com',
 sex: '女',
 province: '河北省',
 hobby: ['弹琴', '读书', '插画']
 }
 // ...
]

// 获取需要渲染到页面中的数据
setSlist(arr) {
 this.slist = JSON.parse(JSON.stringify(arr));
}

<tr v-cloak v-for="(item, index) of slist">
 <td>{{index+1}}</td>
 <td>{{item.username}}</td>
 <td>{{item.email}}</td>
 <td>{{item.sex}}</td>
 <td>{{item.province}}</td>
 <td>{{item.hobby.join(' | ')}}</td>
 <td><a href="javascript:;" @click="showOverlay(index)">修改</a> | <a href="javascript:;" @click="del(index)">删除</a></td>
</tr>

this.list.push({
 username: 'ffff',
 email: 'fffffff@163.com',
 sex: '女',
 province: '河南省',
 hobby: ['弹琴', '插画']
});

// 修改数据
modifyData(index) {
 this.selected = index; // 修改的位置
 this.selectedlist = this.list[index];
 this.isActive = true;
}

this.selectedlist = this.list[index];

this.selectedlist = JSON.parse( JSON.stringify(this.list[index]) ); // 先转换为字符串，然后再转换

/*
 this.list 数据数组
 this.selected 刚才修改的位置
 this.selectedlist 需要保存的数据
*/
Vue.set(this.list, this.selected, this.selectedlist);

// 获取需要渲染到页面中的数据
setSlist(arr) {
 this.slist = JSON.parse(JSON.stringify(arr));
}

<input type="text" placeholder="search" @input="search" list="cars" class="search">
<datalist id="cars">
 <option v-for="item in searchlist" :value="item"></option>
</datalist>

// 搜索
search(e) {
 var v = e.target.value,
 self = this;
 self.searchlist = [];
 if (v) {
 var ss = [];

 // 过滤需要的数据
 this.list.forEach(function (item) {
  // 检测用户名
  if (item.username.indexOf(v) > -1) {
  if (self.searchlist.indexOf(item.username) == -1) {
   self.searchlist.push(item.username);
  }
  ss.push(item);
  } else if (item.email.indexOf(v) > -1) {
  // 检测邮箱
  if (self.searchlist.indexOf(item.email) == -1) {
   self.searchlist.push(item.email);
  }
  ss.push(item);
  }
 });
 this.setSlist(ss); // 将过滤后的数据给了slist
 } else {
 // 没有搜索内容，则展示全部数据
 this.setSlist(this.list);
 }
}

// 弹层组件 
Vue.component('model', {
 props: ['list', 'isactive'],
 template: `<div class="overlay" v-show="isactive">
   <div class="con">
   <h2 class="title">新增 | 修改</h2>
   <div class="content">
    /* 省略 */
   </div>
   </div>
  </div>`,
 computed: {
 modifylist() {
  return this.list;
 }
 },
 methods: {
 changeActive() {
  this.$emit('change'); // 关闭弹层，修改isactive值
 },
 modify() {
  this.$emit('modify', this.modifylist); // 将修改后的数据传递给父组件
 }
 }
});