How to count the data of multiple child components in Vue.js?

Question

JavaScript

I just started learning Vue.js and ran into this problem:
I have several components (1 component - 1 row in the shopping cart, this implementation is due to an excessive number of links on the backend)
I'm trying to calculate the total amount of all products. (each component has the value allPrice = price*quantity)

but how do I make the parent component see and add and subtract if necessary
I try like this, but to no avail:
ParentCart.vue
in the parent component I try to listen to the data of the children

export default {
        data() {
            return {
            }
        },
        computed: {
            handleAdd: function(text) {
                console.log(text.$children);
            }
        }
    }

Cart.vue
here I calculate the price for the quantity of one product and try to pass it to the parent

<template>

        <tr>
            <td><input class="form-control" v-model="amount" name="amount" type="number" style="width: 80px"></td>
            <td><b class="form-control" style="width: 100px; margin-left: 10px">{{ allPrice }}</b></td>
        </tr>

</template>

<script>
    export default {
        props: [
            'cart-amount',
            'price',
            'all-price'
        ],
        data(){
            return {
                amount: 1,
                onePrice: '-'
            }
        },
        mounted() {
            this.onePrice = this.price;
            this.amount = this.cartAmount
        },
        computed: {
            allPrice: function () {
                var priceItem = this.price * this.amount;
                return priceItem
            }
        }
    }
</script>

html.blade.php (in general terms)

<parent-cart  inline-template>
@foreach($carts as $cart)
                                <tr>
                                    <td>
                                        {{ ($cart->product)->title ?? null }}
                                    </td>
                                    <td>
                                        <cart :price="{{ (($cart->product)->price)->value }}"
                                              :cart-amount="{{ $cart->amount }}"
                                              v-bind:all-price="handleAdd"
                                        ></cart>
                                    </td>
                                </tr>
                            @endforeach
</parent-cart>

Answer 1

Lists should consist of a "container", that is, a parent component that knows about the data and knows how to manipulate it, and "stupid" components that should simply display the incoming data.
In your case, the Cart should be the container and the rows should be the stupid components.

Answer 2

1. Why such a perversion with the division of a basket with two functions into several parts.
2. use vuex