Vuex with DataTable error when mutating value

[jjurado]

Hi, I’ve got a “problem” with Vuex and DataTable. I’m giving to my DataTable’s prop “data” an Object from Vuex (computed property mapped from state). That Object is a “form” with some fields, and one of them is a DataTable.

I’ve implemented the logic to ADD and REMOVE rows from that “field” table via Vuex Actions but it throws me the message “Do not mutate vuex store state outside mutation handlers” but, the actual flow of my logic is this:
HTML DataTable own button “ADD” with @click:“addNewRow(id)” -> vue method that dispatches Vuex’s action insertNewRow(id) -> Action insertNewRow commits a mutation “addNewRow(id)” -> Mutation addNewRow(id) finds the field in the object Form and adds a new row -> Vue warn…

Any ideas about why i’m getting this warn?

UPDATED: Add codesandbox example that is a copy of my code BUT in codesandbox is working… https://codesandbox.io/s/mzq48mlq4x