Как исправить данные API, не отображаемые с помощью Vue и Axios

Question

Я не могу загрузить информацию о данных в HTML-таблицу из API через Vue и Axios

Я добавляю vue в качестве моего внешнего интерфейса в мои остальные API, и я правильно вызвал API, используя axios. Проблема в том, что у меня нет данных, но цикл отображает количество строк, потому что у меня есть 3 записи и таблица. показывает 3 пустых места, но не содержит значимых данных, и нет ошибки консоли, пожалуйста, что я делаю неправильно?

<div class="body">
                        <table class="table table-bordered table-striped table-hover dataTable ">
                            <thead>
                                <tr>
                                    <th>Article Id </th>
                                    <th>Title</th>
                                    <th>Body</th>
                                    <th>Edit</th>
                                    <th>Delete</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                     <th>Article Id </th>
                                    <th>Title</th>
                                    <th>Body</th>
                                    <th>Edit</th>
                                    <th>Delete</th>
                          </tr>
                            </tfoot>
                            <tbody>
                                <tr v-for="article in articles" :key="article.article_id">
                                    <td>{{ article.article_id }}</td>
                                    <td>{{ article.article_title }}</td>
                                    <td>{{ article.article_body }}</td>
                                    <td><button @click="geArticle(article.article_id)" class="btn btn-round btn-primary">Edit</button></td>
                                    <td><button @click="deleteArticle(article.article_id)" class="btn btn-round btn-danger">Delete</button></td>
                                    <td></td>

                                </tr>

<script>
new Vue({
    el: "#startapp",
    data: {
        articles: [],
        // loading: false,
        currentArticle: {},
        message: null,
        currentArticle: {},
        newArticle: {'article_title': null, 'article_body': null}

    },
    mounted(){
        this.getArticles();
    },

    methods: {
        getArticles: function() {
            axios({
                method: 'get',
                url: '/api/article'

            }).then((response) => this.articles = response.data)
        }
    }
});
</script>

Данные из API должны показывать article_id, article_title и article_body, но я получаю пробелы, и нет ошибки