Vue Bootsrap component does not render after Vuex Store Update. using watch and nextTick

Question

In a vue cli app, I can't figure out how to make an object in a component re-render when there is a change in the Vuex store made by another component. In this example, I change the curDocTypevariable, but the b-form-select object remains the same value (initially 0). Not sure if the problem is in the Bootsrap side or in Vue.

I have this in one component1.vue :

HTML

<b-form-select v-model="curDocType" :options="options" class="mb-3" v-bind:style="{'background-color': activeColor}">

SCRIPT

data() {
        return {           
        options: [
                { value: 1, text: 'Sale' },
                { value: 5, text: 'CrMemo' },
                { value: 0, text: 'Quote' },
                { value: 4, text: 'CashIn' },                                  
            ],
        curDocType : this.$store.state.curDocType,
        activeColor : '#9EDE7D' //Red
        }
    },


watch:{
     curDocType(newval,oldval){            
            if (newval == 5) this.activeColor = '#D67373'
            else this.activeColor = '#9EDE7D'
            if (this.$store.state.curOrder == ""){
                this.$store.commit('setcurDocType', newval)
            }else{     
              this.$nextTick(() => {this.curDocType=this.$store.state.curDocType})
            }
         }
       }

Now, I have another component2.vue, where I call a method that changes the curDocType in the Vuex Store:

convertOrder(){
        if (this.$store.state.curOrder != ""){
            axios.post(this.ApiBaseUrl + 'PosFunctions/QuoteToOrder',
                    JSON.stringify(this.$store.state.curOrder),
                    {headers: {"Content-Type": "application/json"}})            
            .then((response) => {  
                var res = response; 
                this.$store.commit('setcurDocType', 1) //!!IMPORTANT
                this.RecoverSale(response.data.return_value)
                                
            })
        }
    }

Store.js:

 setcurDocType (state, DocType) {
      state.curDocType = DocType
    },

Versions:

[email protected]
[email protected]"
[email protected]

Answer 1

The problem must come from data(), i don't think calling $store from it will works. (even calling "this" in it is an error but i'm not 100% sure)

Moreover, you shouldn't set a store state to a v-model, since a store state is a "getter" only and a v-model is a two-way binding (getter + setter)

You could do a computed :

curDocType : {
    get(){
        return this.$store.state.curDocType
    }
    set(value){
        this.$store.commit('setcurDocType', 1);
    }
}

With this, binding curDocType to the v-model is correct.

Hope this will fix your problem