vue js 不从 $data 更新参数

大家好。帮助vuejs。任务的本质：有一个网格，在每个单元格中都有一个按钮“添加元素”，按下它会弹出一个带有选择的模式窗口。在模态中选择所需的选项后。窗口中，单击“添加”按钮，具有所选元素名称的 div 应出现在同一单元格中（简而言之）

它是如何工作的：网格、单元格、按钮、模态。窗口是一个单独的组件。网格有一个数组，其中包含整个网格的所有添加项。每个单元格都有自己的 id，通过它进行添加。在模态。窗口，单击按钮会触发一个事件，它会触发按钮的事件，单元格的按钮，网格的单元格，网格将所有添加元素的完整列表传递给单元格:)

代码片段：

网格：

<template>
<div>
    {{ elements }}
    <table class="table table-bordered">
        <tr>
            <cell id="one" :onAdded="addElement" :elements="elements"></cell>
            <cell id="two" :onAdded="addElement" :elements="elements"></cell>
        </tr>
    </table>
</div>
</template>

<script>
export default {
    data: function() {
        return {
            elements: {}
        };
    },
    methods: {
        addElement: function(cellId, name) {
            console.log('В ячейку', cellId, 'нужно добавить элемент', name);
            let elements = this.elements;
            if(typeof elements[cellId] === 'undefined') elements[cellId] = [];
            elements[cellId].push({name});
            this.$set(this.elements, elements);
        }
    }
</script>

细胞：

<template>
<td>
    <div class="panel panel-default"
         v-if="typeof elements[id] !== 'undefined'"
         v-for="element in elements[id]"
    >
        {{ element.name }}
    </div>
    <add-element-button :id="id" :onSuccess="addElement"/>
</td>
</template>

<script type="text/javascript">
export default {
    props: {
        id: {type: String, required: true},
        onAdded: {type: Function, required: true},
        elements: {type: Object, default: function() {
            return {};
        }}
    },
    methods: {
        addElement: function(id, name, params) {
            this.onAdded(id, name);
        }
    }
}
</script>

此代码仅在第一次时有效。在网格的开头，我显示了完整的元素列表。起初，显示空，在第一次添加后，元素出现。之后添加的所有内容都不包含在数组中。

即代码： console.log('To the cell', cellId, '需要添加一个元素', name); from the grid 始终正确执行，但元素不会在页面上重绘。告诉我如何强制 vue 重绘所有元素，或者你可能不需要使用 $set(...) 但其他东西？我已经打破了我的头。提前致谢