VueJS данные неактивно установлены

Question

У меня есть API, который возвращает все курсы валют, я использовал функцию getRate() на mounted, но rate['usd'] равен undefined, если я вызову функцию еще раз на этой странице, она возвращает фактические данные, я пробовал beforeCreated beforeMounted но они не работают, как заставить данные реагировать на нагрузку или я что-то не так делаю?

<template>
  <span v-text="rate['usd']"></span>
</template>

<script>
data() {
    return {
        rate: null
    }
},
methods: {
    getRate() {
        this.$vs.loading()
        this.$http.post('wallet/rate' ,[])
        .then(response => {
            for(let key in response.data.data.data){
                this.rate[response.data.data.data[key].name] = response.data.data.data[key].value
            }
            this.$vs.loading.close()
        })
        .catch(error => {
            this.$vs.loading.close()
        })
    },
},
mounted() {
  this.getRate()
}
</script>

Answer 1

Это работает?

<template>
  <span v-text="rate.usd"></span>
</template>

<script>
data() {
    return {
        rate: null
    }
},
methods: {
    getRate() {
        const rate = {}
        this.$vs.loading()
        this.$http.post('wallet/rate' ,[])
        .then(response => {
            for(let key in response.data.data.data){
                rate[response.data.data.data[key].name] = response.data.data.data[key].value
            }
            this.$vs.loading.close()
            this.rate = rate
        })
        .catch(error => {
            this.$vs.loading.close()
        })
    },
},
mounted() {
  this.getRage()
}
</script>