SOURCE

var app = new Vue({
  el: '#app',
  data: {
    list: [{
      id: 1,
      name: '技术1',
      status: 1
    },
    {
      id: 2,
      name: '技术2',
      status: 2
    },
    {
      id: 3,
      name: '技术3',
      status: 3
    },
    {
      id: 4,
      name: '技术4',
      status: 4
    }]
  },
  mounted() {
    setTimeout(() => this.change(),3000)
  },
  methods:{
    change() {
      console.log('change')
      this.list = [{
        id: 1,
        name: '技术1',
        status: 1
      },
      {
        id: 2,
        name: '技术2',
        status: 2
      },
      {
        id: 3,
        name: '技术3',
        status: 3
      },
      {
        id: 4,
        name: '技术4',
        status: 4
      },
      {
        id: 5,
        name: '技术5',
        status: 5
      }]
    }
  }
})

<div id="app">
  <div class="container">
    <div class="row m-3">
      <table class="table">
        <thead>
          <tr>
            <th scope="col">
              #
            </th>
            <th scope="col">
              id
            </th>
            <th scope="col">
              name
            </th>
            <th scope="col">
              status
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in list" :key="index">
            <th>
              {{index}}
            </th>
            <td>
              {{item.id}}
            </td>
            <td>
              {{item.name}}
            </td>
            <td>
              {{item.status}}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <button type="button" class="btn btn-primary" @click="change()">修改DOM</button>
</div>

@import 'https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css'