Why not randretsa data in the component?

Guys Hello.
Trying to figure out in view, help.
there's a child component
<template>
 <div class="product clearfix">

 <div class="unit-left">
 <img src="./../assets/margo.jpg" class="clearfix">
</div>

 <div class="unit-body">
 <h2 class="product-name">product.title</h2>
 <p class="product-description">Description</p>
</div>
 <div class="unit-right">
 <div class="price">product.price</div>
 <div class="ordering">
 <!--<button class="add-button" @click="addToCart(p)" v-if="qtyInCart == 0">Order</button>-->
the <div>
 <button class="inc clearfix" @click="addToCart(p)">-</button>
 <span class="qty clearfix">7</span>
 <button class="dec" @click="removeFromCart(p)">+</button>
</div>
</div>
</div>
</div>
</template>

the <script>
 import { mapGetters, mapActions } from 'vuex'

 export default {
 prop: ['product'],

 methods: mapActions([
'addToCart',
'removeFromCart',
])
}
</script>

further it was imported in parent, here it is
<template>
the <ul>
 <li class="product product-item" v-for="product in products" :product="product">
<product-item></product-item>


</li>
</ul>
</template>

the <script>
 import { mapGetters, mapActions } from 'vuex'
 import ProductItem from './../components/ProductItem.vue'
 export default {
 computed: mapGetters({
 products: 'allProducts',
 //qtyInCart: 'qtyInCart'
}),
 components: {
ProductItem
},
 created () {
this.$store.dispatch('getAllProducts')
}

}
</script>

the fact that it removes all product from products however title and price displays as
product.title and product.price respectively.
82fbbee110e34c7fbe04c3838919f7cb.png
Why not setting the name and price of the relevant product. What am I doing wrong, what is not understood?
P/S: the nightmare forget the double braces after I made the edit fell down errors of this kind:
[Vue warn]: Property or method "product" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in <productitem> at C:\OpenServer\domains\pizzaStore\src\components\ProductItem.vue)

[Vue warn]: Error in render function: 
(found in <productitem> at C:\OpenServer\domains\pizzaStore\src\components\ProductItem.vue)

TypeError: Cannot read property 'title' of undefined</productitem></productitem>
June 27th 19 at 15:07
4 answers
June 27th 19 at 15:09
Solution
<product-item :product="product"></product-item>

props: ['product'],

https://ru.vuejs.org/v2/guide/components.html#Вход...
thank you very much, and after all I read and it was written but at the end of the day has already begun to do anything, not to notice obvious things - Colleen.Johnston commented on June 27th 19 at 15:12
June 27th 19 at 15:11
Solution
I will add to not forget to wrap the product.title in braces - {{product.title}}
June 27th 19 at 15:13
Guys, thank you for the help!!!Huge
June 27th 19 at 15:15
All this is just awful. I also faced a similar problem where data was not -- I did not understand why. I was initially delighted with the Vue. Now believe the best option is pure js, competent architecture and webpack. All these frangaki for anything more complicated rendering of lists are not suitable.

Find more questions by tags Vue.jsJavaScript