Vuejs Ajax call and dataTable

Question

I'm using Vuejs and dataTable for one of my project. I make an Ajax call and push data into an array. After that I use v-for to loop the data in the <tr> tag. Most of the time it doesn't work. The table loads as soon as the page has finished loading.. it takes a bit of time to receive the ajax data. Here is the output. It says no data available in the table

So the serch option doesn't work properly. I thought to use a setTimeout function (which was a bad idea) to load the table after a bit of time. What would be the proper way to do it? Sharing the code :

    new Vue({
                el: '#app',
                data: {
                    entries: [],
                },
                methods:{
                    getData(){
                        var route = '/admin/temporary-enrolled-students';
                        this.$http.get(route).then((response)=>{
                            for(var i = 0; i< response.data.length;i++)
                            {
                                this.entries.push({
                                    scId: response.data[i].id,
                                    name: response.data[i].user.name,
                                    phone: response.data[i].user.phone,
                                    email: response.data[i].user.email,
                                    courseId: response.data[i].course.id,
                                    courseName: response.data[i].course.course_title,
                                    expiryDate: response.data[i].expiry_date,
                                    shares: response.data[i].number_of_shares,
                                    expired: (response.data[i].expired == 1),
                                    enrollDate: response.data[i].created_at
                                })
                            }

                        })
                    },
                },
                mounted(){
                    this.getData();
                },
            });
//data table
$(function () {
            setTimeout(()=> {          
                $("#temp-enroll").DataTable({
                    "paging": true,
                    "ordering": false,
                    "info": true,
                    "autoWidth": false
                });
            },1000);
        });

in blade:

Answer 1

Ok I tried this and working exactly what I have wanted. Thanks everyone for supporting.

new Vue({
                el: '#app',
                data: {
                    entries: [],
                },
                methods:{
                    getData(){
                        var route = '/admin/temporary-enrolled-students';
                        this.$http.get(route).then((response)=>{
                            for(var i = 0; i< response.data.length;i++)
                            {
                                this.entries.push({
                                    scId: response.data[i].id,
                                    name: response.data[i].user.name,
                                    ............................
                                    ......................
                                    enrollDate: response.data[i].created_at
                                })
                            }

                        }).then(()=>{
                          $("#temp-enroll").DataTable({
                            "paging": true,
                            "ordering": false,
                            "info": true,
                            "autoWidth": false
                             });
                          });
                    },
                },
                mounted(){
                    this.getData();
                },
            });