Why is the calculated value not updated after updating the vuex repository?

Question

I got a computed printerList property, which should be reevaluated after getPrinters() , but it looks like it is not.

sources are online : optbox.component.vue , vuex , optboxes.service.js

Component

 <template> <div v-for="printer in printersList"> <printer :printer="printer" :optbox="optbox"></printer> </div> </template> <script> … created() { this.getPrinters(this.optbox.id); }, computed: { printersList() { var index = optboxesService.getIndex(this.optboxesList, this.optbox.id); return this.optboxesList[index].printers } }, vuex: { actions: { getPrinters: actions.getPrinters,}, getters: { optboxesList: getters.retrieveOptboxes} } <script> 

Actions

 getPrinters({dispatch}, optboxId) { printers.get({optbox_id: optboxId}).then(response => { dispatch('setPrinters', response.data.optbox, response.data.output.channels); }).catch((err) => { console.error(err); logging.error(this.$t('printers.get.failed')) }); }, 

Mutations

 setPrinters(optboxes, optboxId, printers) { var index = this.getIndex(optboxes, optboxId); optboxes[index] = {...optboxes[index], printers: printers } }, 

Question

Why the computed printerList property printerList not overestimated (i.e. v-for empty)

Answer 1

This is related to this line: optboxes[index] = {...optboxes[index], printers: printers } .

You directly set an element with an index that Vue cannot respect.

Try splicing the old element from the array and clicking on the new one.

Answer 2

You can do it:

 Vue.set(optboxesList[index], 'printers', printers )