组件数据已更新，但无法使用

Question

我正在构建甲板建筑应用程序。当用户想要将卡片添加到其牌组时，他们将转到AddDeck视图/组件。然后，他们搜索卡片，当发现类似的卡片时，便将其添加到正在构建的牌组中。用户单击“添加卡”按钮，该卡的信息将放入一个数组中，该数组作为组件的数据成员存储：。

此组件的另一个数据成员是卡座的标题。完成用户操作后，他们单击“保存”按钮，然后将axios请求发送到后端（甲板名称作为URL参数，而请求主体中的deckCards数组）。此外，该平台也已添加到Vuex商店中。这是代码：

saveDeck: function () {
  axios
    .post(`http://localhost:3000/api/pages/decks/add/${this.deckName}`, {
      cards: this.deckCards
    })
    .then(() => {
      this.$store.commit('addDeck', { name: this.deckName, cards: this.deckCards })
      this.$router.push({ path: '../dash' })
    })
    .catch((err) => {
      throw err
    })
}

这就是我的困惑：平台名称可以很好地传递给后端和商店，但是即使Vue DevTools像组件数据中那样显示，平台卡片也不能传递给商店和后端。我唯一能想到的是deckCards是对象数组，而deckTitle只是一个字符串。我有什么特别的事情可以更新组件中的数组数据或发送/解析数组数据以便可以使用？