Ошибка Laravel vuejs «Не удается прочитать свойство данных»

Я пытался понять это уже полчаса, и я не могу исправить ошибку, вот мой компонент vue:

<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>

Когда я загружаю страницу, таблица не отображается, но когда я проверяю сеть на вкладке разработчика в chrome, она может и загружает данные, однако отображает эту ошибку в консоли «Не удается прочитать свойство« данные »неопределенного».

Заранее спасибо.