我的 vue cli 购物车没有按预期工作

Question

我正在 vue cli 中构建购物车但无法正常工作。我没有看到预期的结果。我只是想将产品添加到购物车，但没有任何反应，我不知道自己做错了什么。 请帮我出点主意。

这是我在 app.vue 中的代码：

<mostrar-productos :listaPlantas="listaPlantas"
    @restar-products="restProd">
</mostrar-productos>


<script>

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 },
            ],
        };
    },
    methods:{
        restProd(addProduct){
            for(let item of this.listaPlantas){
                if(item.name== addProduct.name){
                    console.log(item.stock +=1);
                    item.stock +=1;
                }
            }
        }
    }
}


</script>

这是我名为 MostrarProductos.vue 的组件中的代码：

       <div v-for="item in listaPlantas" :key="item.id" v:bind="listaPlantas">
         <ul>
           <li>
              {{ item.name }}
              {{ item.stock }}
              {{ item.price }}
             <button @click="restarProducto()">Agregar</button>
           </li>
          </ul> 
       </div>

      <script>
         export default {
            emits: ['restar-products'],
            props: {
                 listaPlantas: {
                 type: Array,
                 },
                 id:{
                 type: String,
                 }
            },
           methods:{
              restarProducto(item){
                let addItem = {
                stock: this.stock,
                name: this.name, 
              },
              this.$emit("restar-products", addItem);
           }
         }
       } 
      </script>