VueJS: v-for directive is not rendering items in spite of having objects in array

I am trying to render my API response object into the table rows. There is no problem with endpoints. I could fetch data without any issues. Data is paginated. I can see the content of the array object(by using double curly braces). But v-for direction doesn't affect anything.

I tried some ways to fix. One of them is using response.data.data to handle it but it didn't work. I also tried iterating through customers.data but I got the same results.

This part was taken from my component

import axios from 'axios'

export default {
    data () {
        return {
            customers: [],
        }
    },

    mounted: function() {
        axios.get('http://127.0.0.1:8000/customer/all').then(res => {

            this.customers.push(res.data);

        });
    },

Here it is the directive part:

 <tr v-for="customer in customers">
     <td>
         <input class="uk-checkbox" type="checkbox">
     </td>
     <td></td>
     <td>
        
     </td>
     <td>
         <ul class="uk-iconnav">
            <li><span class="uk-icon" uk-icon="icon: check"></span></li>
            <li><span class="uk-icon" uk-toggle="target: #user-request" uk-icon="icon: question"></span></li>
            <li><span class="uk-icon" uk-icon="icon: trash"></span></li>

         </ul>
      </td>
  </tr>
   => this is OK

customers json output

[ { "current_page": 1, "data": [ { "id": 1, "user_info": "test", "password": "test", "gsm": "123123213", "telephone": 124, "mail": "test@test", "address": "test", "created_at": null, "updated_at": null } ], "from": 1, "last_page": 1, "next_page_url": null, "path": "http://127.0.0.1:8000/customer/all", "per_page": 4, "prev_page_url": null, "to": 1, "total": 1 } ]

It should be rendered, but it's not rendering. I didn't get any console errors. What is the problem? Thanks anyway.

via Chebli Mohamed