vue.js - Vue 2 + Vuex: Using state variables in computed property -

i have vuex instance couple variables:

const store = new vuex.store({   state: {     start_date: moment().startof('year').format("mm/dd/yyyy"),     end_date: moment().format("mm/dd/yyyy")   },   mutations: {     changedate(state, date_obj) {       state.start_date = date_obj.start_date       state.end_date = date_obj.end_date     }   } }) 

and have main vue instance date properties inherited store:

var employees = new vue({   el: '#employees',   computed: {     start_date() {       return store.state.start_date     },     end_date() {       return store.state.end_date     },     leads() {       let filter_obj = {         start_date: this.start_date,         end_date: this.end_date       }       return this.fetch('potential_clients', filter_obj)     }   },   methods: {     fetch(model, args=null) {       return new promise((resolve, reject) => {         console.log(resolve, reject)         let url = "/" + model + ".json"         console.log(url);         $.ajax({           url: url,           data: args,           success: ((res) => {             console.log(res)             this[model] = res;             resolve(res)           }),           error: ((res) => {             reject(res)           }),           complete: (() => {})         })       })     }   },   mounted() {     this.fetch('potential_clients')   } }); 

and call this.fetch('potential_clients') without arguments, once value start_date , end_date changed, want call leads() above. nothing changes when change values of start_date , end_date.

it might worth noting when inspect in chrome vue plugin, , click on root component, of sudden changes show in view? odd

any reference variable outside scope of vue instance will not reactive. means store object referencing not reactive.

you need refer vue instance's internal reference store (this.$store), is reactive:

start_date() {   return this.$store.state.start_date }, 

this assuming you've passed store in config object of root vue instance (which in example appears #employees component):

var employees = new vue({   el: '#employees',   store: store,   ...