Реактивные вложенные V-For с использованием Vue / Vuex

Question

Я рендерил таблицу, используя вложенные объекты / массивы из моего магазина Vuex.Когда я добавляю строку в таблицу, несмотря на то, что объект строки добавляется в правильный массив (проверено в Vue Dev-Tools), DOM не обновляется, чтобы показать дополнительные строки.

I 'Я боролся с этим уже несколько часов и решил, что я попрошу немного помощи.Я прочитал предупреждения о реактивности и многое другое в документах Vue безрезультатно.Пожалуйста, помогите.

Объект в моем магазине Vuex, из которого выполняется рендеринг таблицы ...

propertyRating: {
        location: [
            { name: null, inferior: true, slightlyInferior: true, similar: true, slightlySuperior: true, superior: true },
        ],
        site: [
            { name: null, inferior: false, slightlyInferior: false, similar: false, slightlySuperior: false, superior: false },
        ],
        additionalFeatures: [
            { name: null, inferior: true, slightlyInferior: false, similar: true, slightlySuperior: false, superior: true },
        ],
}

Я использую вложенный v-for для загрузки таблицы каждым ключомpropertyRating представляет строку заголовка, соответствующее значение массива представляет список отдельных строк, которые будут отображаться под заголовком.

<div v-for="(section, sectionName) in sections" :key="sectionName">
   <div v-for="(row, index) in [section]" :key="sectionName+index" class="w-row"></div>
</div>

Состояние сопоставляется с компонентом следующим образом:

computed: {
...mapState({
  location: state => state.evaluation.propertyRating.location,
  site: state => state.evaluation.propertyRating.site,
  additionalFeatures: state =>
    state.evaluation.propertyRating.additionalFeatures,
  sections: state => state.evaluation.propertyRating
  })
}

Наконец, мутация для добавления пустой строки в раздел таблицы ...

ADD_PROPERTY_RATING_ROW(state, sectionName) {
   Vue.set(state.propertyRating[sectionName], state.propertyRating[sectionName].length, { name: null, inferior: true, slightlyInferior: false, similar: true, slightlySuperior: false, superior: true });
},

Несмотря на добавление объекта в соответствующий массив разделов (проверено в Vue Dev Tools), DOMне обновляется, чтобы показать новую строку.Буду признателен за любую оказанную помощь.Я делаю все, что знаю, и не могу заставить его работать.