Vuex in calculated properties, showing undefined until the page is fully loaded

Question

I am trying to create computed properties using data pulled out using the mapGetters function in vuex, but I always get undefined until the / dom page is fully loaded.

Here is an example for the processed isRegistered property, which I use to hide / show specific buttons.

computed: {
      ...mapGetters(['solos', 'user']),
      isRegistered () {
        return this.solos.registered.indexOf(this.user._id) !== -1
      }
}

Here is the HTML for buttons that use the computed property isRegistered.

<a href="#" class="register-button" v-if="!isRegistered">REGISTER NOW</a>
<a href="#" class="registered-button" v-if="isRegistered">REGISTERED</a>

I set getters through the action that I call in the created function

created () {
      this.getTournament('solos').catch(err => {})
}

Here is my action for setting the appropriate getters

getTournament: ({commit}, type) => {
    return feathers.service('tournaments').find({
      query: {
        type: type,
        status: 'registering'
      }
    }).then(tourney => {
      commit(type.toUpperCase(), tourney.data[0])
    })
}

Here is the corresponding mutation

const mutations = {
  SOLOS (state, result) {
    state.solos = result;
  }
};

Here's the corresponding getter

const getters = {
   solos (state) {
     return state.solos
   }
}

, , - , undefined, PAGE/DOM , .indexOf :

TypeError: Cannot read property 'indexOf' of undefined

, , - if , , .

isRegistered () {
  if (this.solos._id) return this.solos.registered.indexOf(this.user._id) !== -1
}

-. ?

Answer 1

, vue.

created , , ( ), solos getter ( ), .

, , , , DOM, , , . , , .

v-if="solos.registered", .