在axios调用之后，如何更新子组件中的数据？

Question

我有一个父模板，可以保存该路由器视图，并将url +令牌传递给子组件。

<template>
    <div>
        <router-view :url="url" :token="token"></router-view>
    </div>
</template>

在这个子组件中，我想调用一个api并每4秒更新一次子模板。不幸的是，item.name中未显示任何内容。通话结束后，我每4秒钟就会在console.log中得到结果。

<div class='col-md-4 mt-3' v-for="(item, index) in projects" :key="index">
{{ item.name }}
</div>

export default {
    props: ['token', 'url'],
    data: function() {
      return {
         projects: [],
      }
    }
    mounted: function() {
        this.loadData();
        this.timer = setInterval(this.loadData, 4000);
    },

    methods: {
        loadData: function () {
            var vm = this;
            axios.get(this.url + `/api/someapi`, {headers: {Authorization: this.token }
        }).then(response => {
            vm.projects = response.data.success;
            console.log(response.data.success);
        }).catch(e => {
            this.errors.push(e)
        })
    },
}

为什么我的数据没有更新？