Vuex actions and computed render in template

Коллеги, кто как решает данную проблему. Когда рендерю offer в computed, появляется ошибка ( Cannot read property 'base' of undefined ). Что бы такой ошибки не было, я оборачиваю все это в v-if что - бы рендерилось только когда оффер доступен Но может есть и другие способы

Offers.vue

<template>
  <div v-if="offer">
    {{ offer.interest_rate.base }}
  </div>
</template>

computed: {
     offer() {
// offer looks like {id: 2,
//                     name: 'Haily',
//                     interest_rate: {
//                        base: 2
//}
//}
            return this.$store.state.customer.offer
          }
    },
     created() {
            this.currency = this.$route.query.currency
            this.$store.dispatch('customer/getDepositOffers') 
        }

Customer.js

export const state = () => ({
  offers: [],
  offer: null
})
export const mutations = {
  SET_OFFERS(state, payload) {
    state.offers = payload
  },
  SET_OFFER(state, offers, currency) {
    if (currency) {
      state.offer = offers.filter((offer) => offer.name === currency)[0]
    }
  }
}
export const actions = {
  async getDepositOffers({ commit }, currency) {
    try {
      const data = await this.$api.customer.getDepositOffers()
      commit('SET_OFFERS', data.results)
      commit('SET_OFFER', data.results, currency)
    } catch (error) {
      console.error(error)
    }
  }
}