Reactivity problem with mapGetters only on first load

I think the best way to solve this issue is to store a local variable with a watcher, and then update vuex when the local is changed:

On your component:

<input type="number" v-model="value">

data() {    return {        value: ''    };},computed: {    ...mapGetters({        inputValue: 'getInputValue'    })}watch: {    value(value){        this.$store.dispatch('setInputValue', value);    },    inputValue(value) {        console.log('inputValue', value);    }},created() {    // set the initial value to be the same as the one in vuex    this.value = this.inputValue;}

Please take a look at this sample: https://codesandbox.io/s/vuex-store-ne3ol

Your mistake is, you are using this keyword in template. One shouldn't use this in template code.

<input      type="number"      value="inputValue"      @change="$store.dispatch('setInputValue', $event.target.value)"    >

Bonus tip: It is redundant to use a getter to return the default state if you can just use mapState to return the state.

There are a few small mistakes in the template. It should be this:

<input type="number" :value="inputValue" @change="$store.dispatch('setInputValue', $event.target.value)">

I've removed the this. in a couple of places and put a : out the front of value. Once I make these changes everything works as expected. The this.$store was causing console errors for me using Vue 2.6.10.

I would add that you're using the change event. This is the standard DOM change event and it won't fire until the field blurs. So if you just start typing you won't see anything happen in the console. You'd be better off using input if you want it to update on every keystroke. Alternatively you could use v-model with a getter and setter (see https://vuex.vuejs.org/guide/forms.html#two-way-computed-property).

My suspicion is that when you were reloading the page that was triggering the change event because it blurred the field.