Vue.js not working table filter on single field?

Question

JavaScript

It is necessary that when you click on the corresponding area button, the table is filtered by this area. Everything seems to be written correctly, but when you click on the button, nothing happens. The data is taken from JSON. 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', '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 %}

Tell me, what's the problem?