所以我正在构建一个购物车作为练习，我不明白为什么一种编写代码的方式可以工作，而另一种则不行。
这是工作的代码，它完美地展示了产品：

<mostrar-productos :listaPlantas="listaPlantas">
  </mostrar-productos>

但这一个不起作用：

<mostrar-productos v-for="planta in listaPlantas" 
    :key="planta.id"
    :id="planta.id"
    :name="planta.name"
    :stock="planta.stock"
    :price="planta.price"
    @restar-products="restProd(id)">

这是数据：

export default {
     name: 'App',
     data() {
       return {
          listaPlantas: [
            { id: "flor", name: "flores", qty: 0, stock: 5, price: 1000 },
            { id: "cact", name: "cactus", qty: 0, stock: 3, price: 2000 },
            { id: "arbol", name: "árboles", qty: 0, stock: 6, price: 7000 },
          ],
        };
      },

在我的理解中，两者是一样的：第一个使用完整的对象，而另一个使用属性一个接一个，但它应该是相同的，显然不是，但我不明白为什么。
有人能给我解释一下吗？