vuejs-数组变量具有值，但是v-for不会迭代

Question

App.vue：

<router-view :myFollowings="myFollowings"></router-view>

data() {
    return {
        myFollowings: null,
    }
},
mounted() {
    axios.get('/myFollowings')
        .then(response => {
            this.myFollowings = response.data.myFollowings;
        })
        .catch(error => {
            console.log(error);
        });
    },

Home.vue：

<myfollowing-modal :myFollowings="myFollowings"></myfollowing-modal>

import MyfollowingModal from './MyfollowingModal.vue';

export default {
    props: ['myFollowings'],
    components: {
        'myfollowing-modal': MyfollowingModal,
    }
}

MyfollowingModal.vue：

<div class="modal fade" id="myfollowingModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <ul class="list-unstyled pr-0 mt-5">
                    <li class="media myfollowing"
                        v-for="(myFollowing, index) in myFollowings"
                        :key="index"
                        :index="index"
                        :myFollowing="myFollowing">
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

export default {
    props: ['myFollowings'],
    mounted() {
        console.log(this.myFollowing); // It returns twice: first time undefined, second time the array fetched from parent of parent(App.vue)
    },
}

在MyfollowingModal.vue中，我想遍历从其祖父母那里获取的数组。但这不会成功，因为该值是不确定的。我不知道为什么，但是它第一次在myFollowings上打印两次，所以它没有被定义，所以它没有启动循环，但是第二次有值，但是它没有得到从父级的父级获取的值。