Pass a property from a parent to a child that also has a wire:click

My current structure:

Parent: SearchProducts
Has $this->brand which is an array containing brand ids.

Child: FilterBrands
This is a child because a user can filter the list of brands based on their title which is handled in this child element. This all works fine.

In the child I have a foreach generating the brand list based on the previous mentioned brand filter based on title, this is a list of checkboxes:
<input type="checkbox" id="{{ $brand->id }}" wire:click="$emitUp('filterBrandClick', {{ $brand->id }})" wire:loading.attr="disabled">

Then back to the parent:

public function filterBrandClick($brand_id)
    {
        if (($key = array_search($brand_id, $this->merk)) !== false) {
            unset($this->merk[$key]);
        } else {
            $this->merk[] = $brand_id;
        }
    }

Again, this all works as expected.

But the problem is that these checkboxes are not in sync with the $this->brand array in the parent.

Checking and unchecking states actually work because it’s a checkbox. But in the parent I also have:

public function clearBrandFilter()
    {
        $this->brand = [];
    }

Which doesn’t sync to the child. Can’t figure out how to achieve this sync. I can’t just do wire:model="brand" on the child’s checkbox.

wire:click="$emitUp is emiting an event, not firing a function. You need to link event to a function in your parent component like:

protected $listeners = [
        'filterBrandClick' => 'filterBrandClick',
    ];

I forgot to mention that, but I already have protected $listeners['filterBrandClick] in my parent.

I’ve tested with dd(), that function is actually fired.

Ok, now I see your problem. Basically there are few ways to update children. #1 send event, that the array $brand was updated, second way is to pass $brand values via mount to the children and to make sure that child component will be updated after parent refresh you need to change child component id.
Something like:
@livewire('child.component', ['brand' => $brand], $new_unique_id)

Thanks! Can you please elaborate on that last part:

to make sure that child component will be updated after parent refresh you need to change child component id.

as I feel this is where the crucial part. What is this ID and how do I use it exactly so that when $brands in the parent gets updated I can do something in the child element?