How to control multiple checkbox in Vue

I have a checkbox component in Vue:

<template>
    <div class="checkbox">
        <input class="checkbox-input" name="input" type="checkbox" v-model="checkbox">
    </div>
</template>

<script>
export default {
    data(){
        return {
            checkbox: false
        };
    },
};
</script>

So in the parent component I want to control these checkbox. So here is my parent component:

<div class="card">
                <div class="card-header">
                    <CheckBox />
                </div>
                <div class="card-body" v-for="item in cart" :key="item.product.id">
                    <div class="checkbox-area">
                        <CheckBox />
                    </div>
                </div>
            </div>

So checkbox in card-body can be added when user clicks to add. So if a user clicks 3 times, 3 checkbox are being added inside of card-body. What I am trying to achieve is, as you see in card-header there is another checkbox, and when this checkbox is clicked, I want to check all the checkboxes inside card-body, and when it is unchecked in card-header, I want to unchcecked everything inside card-body.

So do you have any idea how to achieve this?

Thanks...