vue-countdown倒計時無法動態(tài)設(shè)置時間

項目中使用vue-countdown來實現(xiàn)倒計時，倒計時的剩余時間從api中獲取，但是頁面中顯示的倒計時不會自動更改，代碼如下：

<vue-countdown :time="countDown" :interval="1000" :auto-start="true" ref="countdown" class="count-down">
    <template slot-scope="props">{{ props.days }}天{{ props.hours }}時{{ props.minutes }}分{{ props.seconds }}秒</template>
</vue-countdown>

<script>
import VueCountdown from '@xkeshi/vue-countdown'
export default {
    components: {
        VueCountdown
    },
    data () {
        return {
            countDown: 0
        }
    },
    created: function () {
        axios({
            method: 'GET',
            url: 'http://a.b.c',
            withCredentials: true,
            headers: {'lang': 'zh', 'token': '', 'os': 'web', 'version': '1.0.0', 'time': ''}
        }).then((response) => {
            let responseData = response.data.data
            this.timeLeft = responseData.timeLeft
            let now = new Date()
            let timer = (this.timeLeft + 0) * 1000
            let setNow = new Date(now.getTime() + timer)
            this.countDown = setNow - now
            this.$refs.countdown.init()
            this.$refs.countdown.start()
        }).catch((ex) => {
            console.log(ex)
        })
    }
}
</script>

這樣寫頁面中能顯示剩余時間，但是時間不會自己改變，上面的代碼中如果直接在return里把countDown的值寫死，并且注釋掉鉤子函數(shù)中的countDown賦值，倒計時是沒問題的，官方文檔也沒發(fā)現(xiàn)關(guān)于這個的描述，感覺應(yīng)該是自己有什么地操作不當，求大佬指點