在Vue中动态删除datatable的行后将其删除

Question

我已使用访存api删除了一行，但更改未直接反映在数据表中。我尝试使用destroy方法以及draw（），但仍不会刷新内容。

var dt = $('#articles-table').DataTable;
    export default{
        props:['articles', 'rowData'],
        data() {
            return {
                dataTable: null
            }
        },
        mounted(){
            // console.log('Mounted')
        },
        methods: {
            deleteUser(id){
                if(confirm("Are you sure you want to delete?")){
                    fetch(`api/article/${id}`,{
                        method:'delete'
                    })
                    .then(res => res.json())
                    .then(data => {

                        console.log('Deleted Article' + id);
                        // dt.destroy();
                        // dt.row($(this).parents('tr')).remove().draw(true);
                    })
                    .catch(err => console.log(err));
                }
            }
        },
        watch: {
            data() {
                if (this.dataTable) {
                    this.dataTable.destroy();
                    dt.row($(this).parents('tr')).remove().draw(true);
                }

                this.$nextTick(() => {
                    this.dataTable = $("#articles-table").DataTable({
                        language: {
                            emptyTable: "No Results Found"
                        }
                    });
                });
            }
        }
    }