Error:[vuex] Do Not Mutate Vuex Store State Outside Mutation Handlers Vuex (nuxt.js)

I've already searched what causes this error message to appear but could not really get my head around it in my code. I'm using Nuxt.js with Vuex. I just can't see where am i modif

Solution 1:

I fix this issue by using Lodash's cloneDeep method on the get() of my computed option. I do have the state that is deep copied, this way it prevents any mutation of the actual object, and can therefore be modified by the set() in the same way.

The only needed thing is

import { cloneDeep } from 'lodash-es'

export default {
[...]

chartData: {
  get () {
    return cloneDeep(this.$store.state.beta_trend.chartData)
  },
  [...]
},

PS: also worth mentioning that JSON.parse(JSON.stringify(object)) is not recommended: https://flaviocopes.com/how-to-clone-javascript-object/#wrong-solutions