Обновить таблицу Boostrap-Vue после удаления строки

Я использую Bootstrap-Vue для своих таблиц данных и получил следующую таблицу на панели инструментов:

Я могу успешно удалить элементы, щелкнув значок корзины. Он отправляет запрос AJAX с помощью Axios. Однако после удаления он по-прежнему отображает элемент, пока я не обновлю веб-страницу вручную. Как мне решить эту проблему? Я не хочу делать еще один запрос AJAX для загрузки в обновленной версии, я думаю, что лучший способ решить эту проблему - просто удалить строку удаленного элемента из таблицы данных.

Я попытался присвоить своей таблице тег ref и вызвать функцию обновления с помощью this.$refs.table.refresh();, но безуспешно.

Мой код:

<template>
<div>
    <b-modal ref = "myModalRef" hide-footer title = "Delete product">
        <div class = "container">
            <div class = "row">
                <p>Are you sure you want to delete this item?</p>
                <div class = "col-md-6 pl-0">
                    <a href = "#" v-on:click = "deleteItem(selectedID)" class = "btn btn-secondary btn-sm btn-block">Confirm</a>
                </div>
                <div class = "col-md-6 pr-0">
                    <a href = "#" v-on:click = "$refs.myModalRef.hide()" class = "btn btn-tertiary btn-sm btn-block">Cancel</a>
                </div>
            </div>
        </div>
    </b-modal>
    <div id = "main-wrapper" class = "container">
        <div class = "row">
            <div class = "col-md-12">
                <h4>Mijn producten</h4>
                <p>Hier vind zich een overzicht van uw producten plaats.</p>
            </div>

            <div class = "col-md-6 col-sm-6 col-12 mt-3 text-left">
                <router-link class = "btn btn-primary btn-sm" :to = "{ name: 'create-product'}">Create new product</router-link>
            </div>
            <div class = "col-md-6 col-sm-6 col-12 mt-3 text-right">
                <b-form-input v-model = "filter" class = "table-search" placeholder = "Type to Search" />
            </div>
            <div class = "col-md-12">
                <hr>
                <b-table ref = "table" show-empty striped hover responsive :items = "posts" :fields = "fields" :filter = "filter" :current-page = "currentPage" :per-page = "perPage">
                    <template slot = "title" slot-scope = "data">
                        {{ data.item.title|truncate(30) }}
                    </template>
                    <template slot = "description" slot-scope = "data">
                        {{ data.item.description|truncate(50) }}
                    </template>
                    <template slot = "public" slot-scope = "data">
                        <i v-if = "data.item.public === 0" title = "Unpublished" class = "fa fa-circle false" aria-hidden = "true"></i>
                        <i v-else title = "Published" class = "fa fa-circle true" aria-hidden = "true"></i>
                    </template>
                    <template slot = "date" slot-scope = "data">
                        {{ data.item.updated_at }}
                    </template>
                    <template slot = "actions" slot-scope = "data">
                        <a class = "icon" href = "#"><i class = "fas fa-eye"></i></a>
                        <a v-on:click = "editItem(data.item.id)" class = "icon" href = "#"><i class = "fas fa-pencil-alt"></i></a>
                        <a href = "#" v-on:click = "getID(data.item.id)" class = "icon"><i class = "fas fa-trash"></i></a>
                    </template>
                </b-table>
                <b-pagination :total-rows = "totalRows" :per-page = "perPage" v-model = "currentPage" class = "my-0 pagination-sm" />
            </div>

        </div><!-- Row -->

    </div><!-- Main Wrapper -->
</div>

<script>
    export default {

        data() {
            return {
                posts: [],
                filter: null,
                currentPage: 1,
                perPage: 10,
                totalRows: null,
                selectedID: null,
                fields: [
                    {
                        key: 'title',
                        sortable: true
                    },
                    {
                        key: 'description',
                    },
                    {
                        key: 'public',
                        sortable: true,

                    },
                    {
                        key: 'date',
                        label: 'Last updated',
                        sortable: true,
                    },
                    {
                        key: 'actions',
                    }

                ],
            }
        },
        mounted() {
            this.getResults();
        },
        methods: {
            // Our method to GET results from a Laravel endpoint
            getResults() {
                axios.get('/api/products')

                    .then(response => {
                        this.posts = response.data;
                        this.totalRows = response.data.length;
                    });
            },
            getID: function(id){
                this.selectedID = id;
                this.$refs.myModalRef.show();
            },
            deleteItem: function (id) {
                axios.delete('/api/products/' + id)
                    .then(response => {
                        this.$refs.myModalRef.hide();
                        this.$refs.table.refresh();

                    });

            },
            editItem: function (id){
                this.$router.push({ path: 'products/' + id });
            }
        },

    }
</script>