我正在用C#和Vue Js开发一个系统，我需要在表中显示一些数据，为此我使用了JQuery数据表。在我的情况下，所有的数据和选项（搜索和分页）都显示，但问题是在表的顶部行显示为**“表中没有可用的数据”**如果我们强制（Ctrl + F5）刷新，那么表是完美的工作。
注：我在堆栈溢出中搜索了这个问题，有一些相关的问题我尝试了，但我不能弄清楚。请帮助我解决这个问题。
1)第一个页面加载表是这样显示的。
注：如果我在搜索栏中搜索了一些东西，所有的数据都不会出现。

2)强制刷新后，表显示如下，并且工作正常。

这是我用来实现的代码。
Vue组件。

Vue.component('all-enquiry', {
    template: ' <table id="allenquiry" class="table table-striped table-bordered" cellspacing="0" style="width:100% !important"><thead><tr><th>Date<small>/Time</small></th><th>Hndle.By</th><th>Ref:No</th><th>Name</th><th>Destination</th><th>Dep.Date</th><th>Ret.Date</th><th>Airline</th><th>Status</th><th class="disabled-sorting text-right">Actions</th></tr></thead><tbody class="tbody-text"><tr v-for="enq in enquiryall"><td>{{ enq.CreatedDate | formatDate }}</td><td>{{ enq.HandleBy }}</td><td>{{ enq.EnqRefno }}</td><th>{{ enq.PaxName }}</th><td>{{ enq.DepartingTo }}</td><td>{{ enq.DepartingDate }}</td><td>{{ enq.ReturnDate }}</td><td>{{ enq.Airline }}</td><td><button class="btn btn-info btn-sm btn-round">Following Up</button></td><td class="text-right"><button class="btn btn-success btn-sm btn-round">More Info</button></td></tr></tbody></table >',
    data() {
        return {
            enquiryall: '',
        }
    },
    created: function () {      
        this.getall();
    },
    methods: {
        getall: function () {
            var enquiryform = this
            axios.get("/Main/getAllenq/").then(function (response) {
                enquiryform.enquiryall = response.data.allenquiry;

            });

        }
    }
});

表格初始化。

$(document).ready(function () {
    $('#allenquiry').DataTable({
        "pagingType": "full_numbers",
        "lengthMenu": [
            [10, 25, 50, -1],
            [10, 25, 50, "All"]
        ],
        responsive: true,
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search records",
        }

    });   
});

超文本标记语言

<div class="card-body">
    <div class="toolbar">
    </div>
    <all-enquiry></all-enquiry>
</div>