vue.js - How to listen for changes in state object loaded from API? -

if set state object this:

const state: {     tools: {         tool1: {             status: true.             state:          },         tool2: {             status: false.             state: 1         }     } } 

on view side changing correctly when change example status using mutation.

but if set tools using api response:

state.tools = response.tools; 

where response 100% identical nothing happens. state object has changes can seen in vue debuger.

so have tried add const state: { tools: { tool0: { status: true. state: } } }

and added tool1 , tool1 ajax (so object had 3 child element tool0, tool1, tool3). if trigger change on tool1 or tool2 (loaded ajax) nothing happened. when trigger change on tool0 (hardcoded before) works fine - in case settings set on ajax loaded content applied.

thanks hint!

did try set state using vue.set?

ref: https://vuex.vuejs.org/en/mutations.html

from docs:

mutations follow vue's reactivity rules

since vuex store's state made reactive vue...

...

when adding new properties object, should either: use vue.set(obj, 'newprop', 123) or ...

you adding new props here. should set follows:

vue.set(state, tools, response.tools)