Vue js watch vue pretty checkbox values

I am using vue pretty checkbox to display a checkbox. However, based on if one of the checkboxes is checked or not my content has to change! So, I need something like a listener on those vue pretty checkbox components.

However, because vue pretty checkbox is a package I cannot modify the code. My question now is, how can I listen on those checkboxes if they have changed from another component.

Because the products-manager component gets the values. So, whenever the values of the checkboxes of the p-check inside the product-filter changes, I need to pass that to the products-manager component in order to reload the data!

Any ideas on how I can do this? I have already tried this and this but those aren't working for me...

Very important: The number of checkboxes is dynamically as you can see below. The first two checkboxes are always there but the checkbox below gets genereated by a v-for!

This is my sourcecode so far (home template):

<div id="home" class="row">
    <div class="col-xl-12" id="product-sort-and-filter">
        <products-filter ref="productsFilter" :product-types-prop="{{ json_encode($productTypes) }}"></products-filter>
    </div>
    <div class="col-xl-9">
        <div class="products">
            <products-manager ref="productsManager" :products-prop="{{ json_encode($products) }}" auth="{{ \Illuminate\Support\Facades\Auth::check() }}" :userprop="{{ json_encode(\Illuminate\Support\Facades\Auth::user()) }}" route="{{ route('product.index') }}"></products-manager>
        </div>
    </div>
    <div class="col-xl-3">
        <sidebar-manager ref="SidebarManager" :top-products-today-prop="{{ json_encode($products) }}" :top-products-week-prop="{{ json_encode($products) }}" :top-products-month-prop="{{ json_encode($products) }}"></sidebar-manager>
    </div>
</div>

products filter component:

<template>
    <div class="product-sort-and-filter-wrapper d-flex">
        <div class="col-xl-9 product-sorting no-padding">
            <ul class="list-inline">
                <li class="list-inline-item">Highlights</li>
                <li class="list-inline-item">Aktuell</li>
                <li class="list-inline-item">Diskutiert</li>
            </ul>
        </div>
        <div class="col-xl-3 product-filter no-padding text-right">
            <div class="dropdown d-inline-flex">
                <a href="#" class="btn btn-primary" data-toggle="dropdown"><i class="fas fa-filter"></i>FILTERN</a>
                <div class="dropdown-menu" style="margin-top: 0px">
                    <div class="productTypesBoxes dropdown-item pretty-checkbox-wrapper">
                        <p-check name="productExpiredCheckbox" class="p-svg p-plain p-bigger p-smooth" ref="showExpired" toggle true-value false-value>
                            <span class="checkbox-label on rubik-medium">Abgelaufene anzeigen</span>
                            <label slot="off-label"><span class="checkbox-label off rubik-medium">Abgelaufene anzeigen</span></label>
                            <span slot="extra" class="svg"><i data-feather="check-square"></i></span>
                            <span slot="off-extra" class="svg"><i data-feather="square"></i></span>
                        </p-check>
                    </div>
                    <div class="dropdown-divider"></div>
                    <div class="productTypesBoxes dropdown-item pretty-checkbox-wrapper">
                        <p-check name="productTypeCheckbox" class="p-svg p-plain p-bigger p-smooth" ref="showAllProductTypes" toggle true-value false-value checked>
                            <span class="checkbox-label on rubik-medium">Alle anzeigen</span>
                            <label slot="off-label"><span class="checkbox-label off rubik-medium">Alle anzeigen</span></label>
                            <span slot="extra" class="svg"><i data-feather="check-square"></i></span>
                            <span slot="off-extra" class="svg"><i data-feather="square"></i></span>
                        </p-check>
                    </div>
                    <div class="productTypesBoxes sub dropdown-item pretty-checkbox-wrapper" v-for="productType in productTypes">
                        <p-check name="productTypeCheckbox" :value="productType.id" class="p-svg p-plain p-bigger p-smooth" :ref="'productType' + productType.id" toggle>
                            <span class="checkbox-label on ">{{ productType.label }}</span>
                            <label slot="off-label"><span class="checkbox-label off ">{{ productType.label }}</span></label>
                            <span slot="extra" class="svg"><i data-feather="check-square"></i></span>
                            <span slot="off-extra" class="svg"><i data-feather="square"></i></span>
                        </p-check>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ProductsFilter",
        props: ['productTypesProp'],
        data() {
            return {
                highlights: true,
                aktuell: false,
                diskutiert: false,
                showExipredDeals: false,
                productTypes: this.productTypesProp
            }
        }
    }
</script>

<style scoped>

</style>