How to write code to dynamically change the data in the table?

Question

Vue.js

The data comes from the server in the form of an array of objects from which the table is formed. When the first data
arrives, the table is formed correctly. But the code does not react to subsequent data (the template is not redrawn). Can you help me figure out how to code correctly?

<table id="table-box">
    <tr v-for="item in items">
    <td class="column">{{item.date}}</td>
    <td class="column">{{item.regs}}</td>
    <td class="column">{{item.first_deposits}}</td>
    <td class="column">{{item.deposits}}</td>
    </tr>
</table>

$.ajax({
        type: 'post',
        url: '/api/v1/user',
        data: formData,
        success: function (data) {
            new Vue({
                   el:'#table-box',
                  data:{
                       items: data
                  }
            });
        },
        error: function (xhr, status, error) {
            
        }
    });

Answer 1

Initialize the Vue instance once, when the page opens:

const vm = new Vue({
  el: '#table-box',
  data: () => ({
    items: [],
  }),
});

And in the ajax request callback, just update the data:

success(data) {
  vm.items = data;
},