Laravel - Vue js application not showing data properly

Question

working with Vue js and Laravel REST API. database is mysql. but when try show ContactList it is not displaying here.. web.php

Route::prefix('api')->group(function() {
    //get contact
    Route::get('getContacts','ContactController@getContacts');
});

ContactController.php

class ContactController extends Controller
{
    public function getContacts() {
        $contacts = Contact::all();
        return $contacts;
    }
}

ContactList.vue

  <tbody v-for="contact in contacts" :key="contact.id">
                <tr>
                    <th scope="row">{{ contact.id}}</th>
                    <td>{{ contact.name}}</td>
                    <td>{{ contact.email}}</td>
                    <td>{{ contact.designation}}</td>
                    <td>{{ contact.contact_no}}</td>
                    <td><button class="btn btn-danger btn-sm">Delete</button></td>

                </tr>
            </tbody>

        </table>
    </div>
</template>

<script>
export default {
    name:'Contact',
    created() {
        this.loadData();

    },
    methods: {
        loadData() {
            let url = this.url + '/api/getContacts';
            this.axios.get(url).then(response => {
                this.contacts = response.data
                console.log(this.contacts);
            });
        
        
        },
        mounted() {
            console.log('Contact List Component Mounted');
        },
        data() {
            return {
                url: document.head.querySelector('meta[name="url"]').content,
                contacts:[]
            }
        }
    }
}
</script>

console displaying following error **[Vue warn]: Property or method "contacts" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties .

found in

---> at resources/js/components/ContactList.vue **

Answer 1

In Laravel Side send response in a proper format

 $contacts = Contact::all();
    
 $data['contacts'] =  $contacts;

 return response()->json(['status' => true, 'message' => 'Contacts collected', 'data' => $data]);

Vue.js Side

let url = this.url + '/api/getContacts';
  this.axios.get(url).then(response => {
  this.contacts = response.data.data.contacts
 });