Why is Vue.js not updating the table?

Question

Vue.js

I'm trying to filter a table by one field by clicking on a button with the appropriate state name. In the browser in the inspector, I see that everything is updated as needed <Root>and works correctly, but <VtServerTable>remains unchanged and, accordingly, nothing externally changes on the page. Please tell me what I'm doing wrong, what and where to add?

The code:

{% extends 'sycatalog/sy_profile.html' %}

{% block data %}
<div id="crm-app">
    <div class="managers">
        <ul>
            <li v-for="manager in managers">{% verbatim %}{{ manager.name_raw }}{% endverbatim %}</li>
        </ul>
    </div>
    <button class="btn btn-secondary" :class="{active:state==selectedState}" v-for="state in states" @click="stateFilter(state)">
        {% verbatim %}{{ state.abbr }}{% endverbatim %}
    </button>
    <button class="btn btn-default" @click="stateFilter('')">Сбросить</button>

    <v-server-table ref="table" url="/crm/customeroffice/" :columns="columns" :options="options">
    </v-server-table>
</div>



<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-tables.js"></script>
<script>
    Vue.config.devtools = true;
    Vue.use(VueTables);

    const ServerTable = VueTables.ServerTable;
    const Event = VueTables.Event;

    Vue.use(ServerTable);
    new Vue({
        el: "#crm-app",
        methods: {
            stateFilter: function(state) {
                let url = '/crm/customeroffice/'
                let params = {'state': state.id};                
                this.selectedState = state;

                axios.get(url, {
                    params: params
                }).then((response) => {
                    this.data = response.data.results;
                    this.$refs.table.refresh();
                }).catch( error => { console.log(error); })
                .finally(() => (global_waiting_stop()));
            },
            getManagers: function () { 
                let url = '/crm/crmuser/';
                let data = {'type': 'responsibles'};

                axios.get(url, {
                    params: data
                }).then((response) => {
                    this.managers = response.data.results;
                }).catch( error => { console.log(error); })
                .finally(() => (global_waiting_stop()));
            },
            getStates: function () { 
                let url = '/crm/state/';

                axios.get(url).then((response) => {
                    this.states = response.data.results;
                }).catch( error => { console.log(error); })
                .finally(() => (global_waiting_stop()));
            }
        },
        mounted () {
            this.getManagers();
            this.getStates();
        },
        data: {
            // filterByColumn: true,
            columns: ['id', 'customer.name', 'state.name'],
            // editableColumns:['name'],
            // sortable: ['sap', 'name'],
            // filterable: ['sap', 'name'],
            data: [],
            states: [],
            selectedState: '',
            managers: [],
            options: {
                requestFunction(data) {
                    return axios.get(this.url, {
                        params: data
                    }).catch(function (e) {
                        this.dispatch('error', e);
                    }).finally(() => (global_waiting_stop()));
                },
                responseAdapter(resp) {
                    var data = this.getResponseData(resp);
                    return {data: data.results, count: data.count}
                },
            }
        }
    });
</script>
{% endblock %}

Answer 1

Как начинающий любитель ...
Используя Promise будьте готовы не получить никаких данных ))) Сталкивался и до сих пор играю с кодом.
Да - нажали на кнопку @click="stateFilter('')"
Да - функцию вызвали stateFilter
НО в data вам только пообещали данные this.data = response.data.results;. Таблица не обновляется, ее нет еще. devtools показывает данные уже после окончательного рендеринга.
Что я не понимаю и мне не нравиться:
1. global_waiting_stop() что за обработчик? Зачем он там вообще нужен?
Я использовал computed, и вам наверное также стоит попробовать watch.
У меня проще: Я получаю данные на этапе mounted.
У вас сложнее. Надо что бы кнопка вызывала обновление данных и только после получения запускать this.$refs.table.refresh();
Если попробовать watch натравить на data и вызвать refresh.
UPD:
У вас две data как бы коллизии не было )))
И надо вроде data() { return {..data...}