VueJS data not reactive mounted

Question

I have an API which returns all the currency rate, i used a function getRate() on mounted but rate['usd'] is undefined , if i call the function again on that page it returns the actual data, i tried beforeCreated beforeMounted but they are not working, how to make the data reactive on load or am i doing something wrong?

<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

Does this work?

<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>