Javascript Vuex对象重复，而不是更新

将创建一个新对象，而不是更新vuex绑定中的当前对象。 该数据库是谷歌的云firestore

我在我的应用程序中使用Vue、vuex、vuetify、谷歌云firestore和谷歌存储

这是此特定部件的“我的商店”模块：

从“../firebase”导入{catsColl，productsColl}
常量状态={
catOrProducts:[]，
}
常数突变={
setCatProd（状态，val）{
state.catOrProducts=val
},
}
常量动作={
// https://vuefire.vuejs.org/api/vuexfire.html#firestoreaction
//eslint禁用下一行无未使用的变量
异步bindCatsWithProducts（{commit，dispatch}，CatID）{
const contain=CatID | |“nC”
常数arr=[]
catsColl.where（'parentCat'，'='，contain.）.orderBy（'name'，'asc'））
.onSnapshot（快照=>{
snap.forEach（cat=>{
arr.push（{id:cat.id，…cat.data（）}）
})
})
productsColl.where（'isSold'，'='，true）。where（'cats'，'array contains'，'contain）。orderBy（'name'，'asc'））
.onSnapshot（快照=>{
snap.forEach（prod=>{
arr.push（{id:prod.id，…prod.data（）}）
})
})
提交（'setCatProd'，arr）
},
}
导出默认值{
名称空间：对，
国家,，
行动，
突变，
}

视图在容器内的my组件中处理。这两个组件用于产品和类别，因为我想以不同的方式显示它们

编辑26.09.20

其中使用的两个组件（tiles）如下所示（尽管产品1更复杂，具有一些动态类分配）

但这只会删除检测到的

重复密钥

错误。 仍有创建的对象

我也从等式中删除了类别，但即使没有它们，我仍然会得到重复的类别

如果我做更多的更改，它每次都会创建一个新对象！ 重新加载整个页面会恢复为仅显示正确的产品，因为错误不在数据库中

---

如何使这种绑定正常进行？

要收集一些信息，组件是否共享相同的数据对象？@MrTech我编辑了我的问题并添加了平铺代码。他们只是拿了些道具。他们甚至不知道自己的ID。我需要给他们一个吗？我发现了这个链接，并认为它可能与正在发生的事情有关，基本上，它看起来像是Vue的一个bug。“当组件共享同一个数据对象时，它们是重复的#7805”

<template>
  <v-hover
    v-slot:default="{ hover }"
    class="unselectable"
  >
    <v-card :elevation="hover ? 6 : 2">
      <v-img
        class="white--text align-end"
        :src="src"
        gradient="to bottom, rgba(0,0,0,0), rgba(0,0,0,.5)"
        aspect-ratio="1"
        height="17rem"
        contain
      >
        <v-card-title class="white--text ">
          {{ name }}
        </v-card-title>
      </v-img>
    </v-card>
  </v-hover>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    },
    src: {
      type: String,
      default: '@/assets/placeholder.png'
    },
  }
}
</script>

v-for="(catOrProduct, index) in catOrProducts"
:key="index"