VueJS计算的道具不反应

Question

前言

我正在尝试使用一条数据作为子组件中的道具。我需要稍微修改一下该道具以获得所需的数据。我的问题是计算的道具没有反应性。

我的数据看起来如何

{
    "SomeItem": "0",
    "DynamicItem1": "0",
    "SomeOtherDynamicItem": "0"
}

这是我的初始状态，我通过JSON.transform（）转换为对象。重要的是，可以有任意数量的动态项目。可以有DynamicItem10等。

我正在处理数据

此数据存在于我的父组件的数据对象中。每当我从网络套接字获得更新时，这就是我更改数据的方式：

Vue.set(this.nodes, node, value)

我是从vues文档中的“深度反应性”文档中得到的。假定这将使动态添加到数据对象反应性的属性AFAIK。这可以正常工作，因为我可以在控制台中看到正在正确更新的数据。

接下来，我将这些数据通过道具传递给子组件，如下所示：

<Step1 :nodes="nodes" style="grid-row-start: 1; grid-column-start: 1" />

在我的子组件中，我首先按照this线程将道具分配给数据组件：

data() {
    return {
        localnodes: this.nodes
    };
}

因为我需要进行一些过滤，所以为此使用了计算属性：

computed: {
    width_nodes: function() {
        var widthnodes = {};
        for (var node in this.localnodes) {
            if (node.includes("DynamicItem")) {
                Vue.set(widthnodes, node, this.localnodes[node]);
            }
        }
        return widthnodes;
    }
}

问题

我希望只要我的父组件中的相应数据发生更改，此计算属性都会更新。但是事实并非如此。我可以在vue devtools中看到已更改的数据，但计算出的属性不能反映这些更改。这似乎与反应性变化检测警告直接相关，因为如果我在初始数据中添加例如DynamicItem2，它将得到正确更新。

编辑：我如何使用width_nodes

<tr v-for="(value, name) in width_nodes" :key="name">
    <td style="font-weight: bold;">{{ name }}</td>
    <td>{{ value }}</td>
</tr>