Как оформить код, чтобы динамически изменялись данные в таблице?

Question

[roovwhite]

С сервера приходят данные в виде массива объектов из которых формируется таблица. Когда приходят первые данные
- таблица формируется корректно. Но код не реагирует на последующие данные (шаблон не перерисовывается). Помогите разобраться, как правильно оформить код?

<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

[0xD34F]

Инициализируйте экземпляр Vue один раз, при открытии страницы:

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

А в коллбэке ajax-запроса просто обновляйте данные:

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