How to link el-select and vuex?

Question

Vue.js

There is such a JSON

"tableForm": {
    "head": {
        "th": [
            "опции",
            "текст1",
            "текст2",
            "текст3"
        ]
    },
    "body": {
        "tr": [
            {
                "td": [
                {
                    "id": 0,
                    "label": "Какой-то текст",
                    "tooltip": "Тут должно быть описание",
                    "name": "text1",
                    "type": "select",
                    "select": {
                        "value": "",
                        "fields": [
                            {
                            "id": 0,
                            "label": "Нет",
                            "value": "Нет"
                            },
                            {
                            "id": 1,
                            "label": "Да",
                            "value": "Да"
                            }
                        ]
                    }
                },
                {
                    "check": true
                },
                {
                    "check": true
                },
                {
                    "check": false
                }
                ]
            },
            {
                "td": [
                {
                    "id": 0,
                    "label": "Какой-то текст",
                    "name": "text1",
                    "type": "select",
                    "tooltip": "Тут должно быть описание 2",
                    "select": {
                        "value": "",
                        "fields": [
                            {
                            "id": 0,
                            "label": "Нет",
                            "value": "Нет"
                            },
                            {
                            "id": 1,
                            "label": "Да",
                            "value": "Да"
                            }
                        ]
                    }
                },
                {
                    "check": false
                },
                {
                    "check": true
                },
                {
                    "check": true
                }
                ]
            },
            {
                "td": [
                {
                    "id": 0,
                    "label": "Какой-то текст",
                    "tooltip": "Тут должно быть описание 3",
                    "name": "text1",
                    "type": "select",
                    "select": {
                        "value": "",
                        "fields": [
                            {
                            "id": 0,
                            "label": "Нет",
                            "value": "Нет"
                            },
                            {
                            "id": 1,
                            "label": "Да",
                            "value": "Да"
                            }
                        ]
                    }
                },
                {
                    "check": true
                },
                {
                    "check": false
                },
                {
                    "check": true
                }
                ]
            }
        ]
    }
}

According to it, a plate is generated.

Here's to the component

<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th v-for="(item, index) in options.head.th" :key="index">
                        {{ item }}
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in options.body.tr" :key="index">
                    <td v-for="(item2, index) in item.td" :key="index">
                        <el-tooltip class="item" effect="dark" :content="item2.tooltip" placement="right-start">
                            <span>{{ item2.label }}</span><br/>
                        </el-tooltip>
                        <span class="el-icon-check" v-if="item2.check"></span>
                         <el-select v-if="item2.type == 'select'" v-model="item2.select.value" placeholder="Выберите значение" @change="update">
                            <el-option
                            v-for="item in item2.select.fields"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

Here v-model is also used, and an error occurs. Do not mutate vuex store state outside mutation

How can I fix this in this situation?

Answer 1

Throw out the v-model, set the elements to value instead, and hang up the input event handler, into which the property name will be passed, and the mutation will twitch inside:

methods: {
  onInput(propName, propVal) {
    this.$store.commit('updateForm', { propName, propVal });
  },
},

Answer 2

Very simple. It is enough to follow the instructions of the error: do not mutate the store outside of mutations.
PS Use index like :key? Are you trying to fool yourself?