Laravel vuejs 'Cannot read property of data' error - laravel

Question

Been trying to figure this out for half an hour now and I cant seem to fix the error, here is my vue component:
<template>
<div class="container">
<div class="row mt-5">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Country Lists</h3>
</div>
<!-- /.card-header -->
<div class="card-body table-responsive p-0">
<table class="table table-hover">
<tr>
<th>Year</th>
</tr>
<tr v-for="country in countries.data" :key="country.id">
<td>{{country.name}}</td>
</tr>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
</div>
</div>
</template>
<script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/vue-simple-search-dropdown/dist/vue-simple-search-dropdown.min.js"></script>
<script>
export default {
data(){
return{
country : {},
form: new Form({
id : '',
})
}
},
methods: {
loadCountry(){
axios.get('api/country').then(({data}) => (this.countries = data));
}
},
mounted() {
this.loadCountry();
Fire.$on('reloadAfter',() => {
this.loadCountry();
});
}
}
</script>
When I load the page the table wont display, but when I check the network from the developer tab in chrome, it can and loads the data, however it displays this error in the console 'Cannot read property 'data' of undefined'.
Thanks in advance.

Answer 1

The problem is here
<tr v-for="country in countries.data" :key="country.id">
<td>{{country.name}}</td>
</tr>
countries is not defined yet.
You can, for example, add it to data()
data(){
return{
countries : {},
},
}
And test the presence of data
<table v-if="countries.data" class="table table-hover">