添加的组件包含旧数据

Question

我不明白这里发生了什么。我动态地将一个组件添加到父模板。我不明白的是，由于某种原因，新添加的组件在第一次单击时携带旧数据，然后在第二次单击时使用最新数据进行更新。我假设新组件也会有新数据，但事实并非如此。 You can see this happening on my site.

只需打开控制台即可查看计数。单击红色按钮添加组件。然后，当您第一次单击新组件时，它将恢复为旧数据，再次单击它将移至最新数据。

以下是我的代码：这会在我的组件内的click上触发，并向我的父模板发送this.counter。 Counter作为数据元素在我的组件上定义。

methods: {
 sendCounter() {
     this.counter++;
     console.log("What's my counter " + this.counter);
     this.$emit('newComponent', this.counter);
 },

然后这是我父模板中的receiver：

<marketplace @myError="notice = $event" @newComponent="components = $event++"  v-for="(item, index) in components" :index="index"></marketplace>

编辑： 似乎每次添加其他组件时都会重新创建data元素。奇怪的是，它“赶上”了当前计数的反击。