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

Необходимо, чтобы при нажатии на соответствующую кнопку области, таблица фильтровалась по этой области. Вроде всё правильно написано, но при нажатии на кнопку ничего не происходит. Данные берутся из 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/[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', '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 %}

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