usando Vue js 3 como seguimiento para mostrar los datos de los clientes en la aplicación Vue CustomerList.vue

 <template> <div class="container"> <table class="table table-hover"> <thead> <tr> <th scope="col">#</th> <th scope="col">First Name</th> <th scope="col">Last Name</th> <th scope="col">Email</th> <th scope="col">Contact No</th> </tr> </thead> <tbody v-for="customer in customers" :key="customer.id"> <tr class="table-secondary"> <th scope="row">{{customer.id}}</th> <th scope="row">{{customer.fname}}</th> <th scope="row">{{customer.lname}}</th> <th scope="row">{{customer.email}}</th> <th scope="row">{{customer.contact_no}}</th> </tr> </tbody> </table> </div> </template> <script> import axios from 'axios'; export default { name:'CustomerList', data(){ return { customers:Array } }, created() { this.getCustomers }, methods: { async getCustomers() { let url = 'http://127.0.0.1:8000/api/customers'; await axios.get(url).then(response => { this.customers = response.data.customers; console.log(this.customers); }).catch(error => { console.log(error); }); } }, mounted() { console.log('Customer List Component mounted'); } } </script>

He seguido Laravel_api web.php

 Route::get('customers',[App\Http\Controllers\CustomerController::class, 'getCustomers']);

ControladorDeCliente.php

 public function getCustomers(){ $customers = Customer::all(); return response()->json( [ 'customers' => $customers, 'message' => 'Customers', 'code' => 200 ] ); }

pero cuando se ejecutan ambas aplicaciones, los datos de la tabla no son visibles en el archivo vue y tampoco se imprimen los datos de los objetos de la consola. ¿Cómo podría solucionar este problema aquí?