Vue.js не работает фильтр таблицы одному полю?

Question

[ekzotika]

Необходимо, чтобы при нажатии на соответствующую кнопку области, таблица фильтровалась по этой области. Вроде всё правильно написано, но при нажатии на кнопку ничего не происходит. Данные берутся из JSON. Код:

{% 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/vue-tables-2@2.0.23/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', 'state'],
            // 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 %}

Подскажите, в чем проблема?