Please Help me !! the data is displayed but the first row shows the message "No data available in table" after render data

I am using data-table in Vue.js in a laravel project. the data has reloaded well in data-table. but the problem is the data retrieve after loading data-table. because, in the first row of data-table says "No data available in table"!! how do I solve this problem.???

<table class="table table-hover" id="data-table">
                <thead style="background:#eaeaea;">
                  <tr>
                    <th>Name</th>
                    <th>No of items</th>
                    <th>Status</th>
                    <th>Created_at</th>
                    <th><i class="fas fa-arrow-circle-down"></i></th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(categories, key) in tableData" :key="key">
                    <td></td>
                    <td>0</td>
                    <td>
                      <label v-if="categories.status == 'y'" class="badge mr-2 pull-left badge-success">Active</label>
                      <label v-if="categories.status == 'n'" class="badge mr-2 pull-left badge-danger">Disabled</label>
                    </td>
                    <td></td>
                    <td>
                      <a href="#" @click="editModal(categories)" class="btn btn-sm btn-warning"> <i class="fas fa-pen"></i></a>
                      <a href="#" @click="deleteUser(categories.id)" class="btn btn-sm btn-danger"> <i class="fas fa-trash"></i></a>
                    </td>
                  </tr>
                </tbody>
              </table>


loadCategories(){
        var app = this;
        axios.get('/api/categories',{
            params: {
              company : app.selectedOutlet
            }
        })
            .then(function (resp) {
                app.tableData = resp.data.categories
                $( () => { $('#data-table').DataTable({
                      "retrieve": true,
                      "order": [[ 0, "desc" ]],
                      "language": {
                          "paginate": {
                              "previous": "<i class='fas fa-arrow-left'></i>",
                              "next": "<i class='fas fa-arrow-right'></i>"
                          },
                          "lengthMenu": 'Display <select class="custom-select">' +
                              '<option value="10">10</option>' +
                              '<option value="20">20</option>' +
                              '<option value="30">30</option>' +
                              '<option value="40">40</option>' +
                              '<option value="50">50</option>' +
                              '<option value="-1">All</option>' +
                              '</select>',
                          "info": "Showing page <b class='text-info'> _START_ </b> to <b class='text-info'> _END_ </b>  of <b class='text-info'> _TOTAL_ </b> entries"
                      }
                  })
                })
            })
            .catch(function (resp) {
                console.log(resp);
            })
      }

via Chebli Mohamed