Something is not working in vue js, I can't see the info of props

Question

I have this problem, I can't see the data of the father when I use it in the child component. This is the child component:

<template>

<div>
    <h3>Lista de compras:</h3> 
    
        Carrito:
    <div v-for="item in listaPlantas" :key="item">
         {{item.productName}} : {{item.productQty}}            
    </div> 
</div>   

</template>
<script>

export default{
   props: ["listaPlantas", "productName", "productQty", "productPrice", "productStock", 
  "productId"], 
</script>

And this is the father:

 <template>
    <section>
      <agregar-productos v-for="planta in listaPlantas" :key="planta.id"
           :product-name="planta.name"
           :product-id="planta.id"
           :product-stock="planta.stock"
           :product-qty="planta.qty"
           :product-price="planta.price"></agregar-productos>
      </section>
   </template>

 <script>
 export default {
    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: 'arboles', qty: 0, stock: 6, price: 7000},
        ]
       };
     }, 
    methods: {
        manejoProductos(id){
            for(let flower of this.listaPlantas){
                     if(flower.name == id){
                         flower.qty +=1;
                         flower.stock -=1;
                         console.log(flower.name, flower.qty);
                     }
                }
            }
      }   
   }
 </script>

Answer 1

You're looping over the products in both the parent and the child. Try this:

<template>
<div>
    <h3>Lista de compras:</h3> 
    
        Carrito:
    <div v-for="item in listaPlantas" :key="item.id">
         {{item.name}} : {{item.qty}}            
    </div> 
</div>   
</template>
<script>
export default{
   props: ["listaPlantas"], 
</script>

<template>
  <section>
    <agregar-productos :listaPlantas="listaPlantas" />
  </section>
</template>

 <script>
 export default {
    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: 'arboles', qty: 0, stock: 6, price: 7000},
        ]
       };
     }, 
    methods: {
        manejoProductos(id){
            for(let flower of this.listaPlantas){
                     if(flower.name == id){
                         flower.qty +=1;
                         flower.stock -=1;
                         console.log(flower.name, flower.qty);
                     }
                }
            }
      }   
   }
 </script>