Vue组件数据未从AJAX更新

Question

在ajax请求之后，我组件的数据没有更新。 {{ this.students }}始终仅显示“ []”，而v-for不呈现任何内容。如果我使用占位符数据初始化students数组，则会显示但不会更改。

app.js：

require('./bootstrap');
import ExampleComponent from './components/ExampleComponent.vue';
window.Vue = require('vue');

const app = new Vue({
    el: '#app',

    components: {ExampleComponent}
});

ExampleComponent.vue：

<template>
    <div class="container">
        <h1>Students</h1>
        <a href="/students/create" class="btn btn-primary">Add Student</a>
        <br /><br />
        {{ this.students }}
        <ul class="list-group">
            <li v-for="student in students" :key="student.id">@{{student}}</li>
        </ul>
    </div>
</template>

<script>
    export default {

        data() {
            return {
                students: []
            }
        },

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

        methods: {
            fetchStudents() {
                console.log('fetch students()', this.students)
                axios.get('/index').then((response) => {
                    console.log(this.students)
                    this.students = response.data
                    console.log(this.students)
                })
                .catch((err) => console.log(err))
            }
        }


    }
</script>

控制台输出：

fetch students() [__ob__: Observer]
VM6367 app.js:1793 [__ob__: Observer]
VM6367 app.js:1795 (5) [{…}, {…}, {…}, {…}, {…}, __ob__: Observer]