Accessing Vuex in v-bind

Question

I would like to access a value from a Vuex store module within v-bind.

<input @blur="validate_field" 
       name="firstName" 
       placeholder="First Name" 
       :class="{fail: this.$store.state.formStore.signupForm.errors.firstName}"
/>

This throws the following error:

TypeError: Cannot read property 'signupForm' of undefined

I have tried adding the following:

computed: {
  ...mapState({
    signupForm: state => state.formStore.signupForm
  })
}

And replacing the failing line with:

:class="{fail: signupForm.errors.firstName}"

as well as a panoply of other things, to no avail. Any ideas?

EDIT: Here is my store:

const state = {
  // data
  formStore: {
    // data
    signupForm: {
    // data
      errors: {
        // NO data
      }
    }
  }
}

Answer 1

Thanks to @wes in the comments for pointing out the doc on reactivity.

Here the doc says:

Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion.

I was dynamically populating the error object. Turns out Vue.js doesn't detect this and as such can't react to it.

With the addition of firstName, it works:

const state = {
  // data
  formStore: {
    // data
    signupForm: {
    // data
      errors: {
        firstName: ''  <--------
      }
    }
  }
}

The lesson is: all properties you expect Vue to react to must be declared explicitly.