I have a child component Table.

Table.php

<?php

namespace AppUIHttpTwigComponentsMolecules;

use SymfonyUXLiveComponentAttributeAsLiveComponent;
use SymfonyUXLiveComponentAttributeLiveProp;
use SymfonyUXLiveComponentDefaultActionTrait;

#[AsLiveComponent]
final class Table
{
    use DefaultActionTrait;

    #[LiveProp] public array $headers = [];
    #[LiveProp(updateFromParent: true, onUpdated: 'onDataUpdate')] public array $data = [];

    public function onDataUpdate(): void
    {
        $this->data;
    }
}

<div {{ attributes }}>

    {% if data|length > 0 %}
        <div class="table">
            <div class="row header">
                {% for header in headers %}
                    <div class="cell">{{ header }}</div>
                {% endfor %}
            </div>

            {% for row in data %}
                <div class="row">
                    {% for cell in row %}
                        <div class="cell">{{ cell }}</div>
                    {% endfor %}
                </div>
            {% endfor %}
        </div>
    {% else %}
        <span class="no-data">Er is momenteel nog geen data beschikbaar.</span>
    {% endif %}

</div>

This component is loaded from my parent component like this:

<twig:Molecules:Table :headers="childrenTableHeaders" :data="data" data-live-id="{{ 'childrentable' ~ childrenTableData|length }}" />

This is my parent component:

<?php

namespace AppUIHttpTwigComponentsPagesAdmin;

use AppDomainServiceUserChildServiceInterface;
use PsrLogLoggerInterface;
use SymfonyComponentEventDispatcherAttributeAsEventListener;
use SymfonyComponentHttpFoundationRequestStack;
use SymfonyUXLiveComponentAttributeAsLiveComponent;
use SymfonyUXLiveComponentAttributeLiveAction;
use SymfonyUXLiveComponentAttributeLiveListener;
use SymfonyUXLiveComponentAttributeLiveProp;
use SymfonyUXLiveComponentComponentToolsTrait;
use SymfonyUXLiveComponentDefaultActionTrait;

#[AsLiveComponent]
final class AdminImportChildren
{
    use DefaultActionTrait;
    use ComponentToolsTrait;

    public function __construct(
        private RequestStack $requestStack,
        private readonly ChildServiceInterface $childService,
        private LoggerInterface $logger,
    )
    {
    
    }
    
    #[LiveProp] public bool $showAdminImportChildrenForm = false;
    #[LiveProp] public array $childrenTableHeaders = ['Voornaam', 'Achternaam', 'Geboortedatum', 'BSN'];
    #[LiveProp] public array $childrenTableData = [];

    public function mount(): void
    {
        $this->refreshChildrenTableData();
    }

    #[AsEventListener('import.children')]
    public function refreshChildrenTableData(): void
    {
        $this->logger->info('Refreshing children table data');
        $allChildren = $this->childService->getAllChildren();
        $this->childrenTableData = array_map(function($child) {
            return [
                'voornaam' => $child->getFirstName(),
                'achternaam' => $child->getLastName(),
                'geboortedatum' => $child->getBirthDate()->format('d-m-Y'),
                'bsn' => $child->getSsn(),
            ];
        }, $allChildren);
    }

    #[LiveAction]
    public function toggleAdminImportChildrenForm(): void
    {
        $this->showAdminImportChildrenForm = !$this->showAdminImportChildrenForm;
    }
    
    #[LiveListener('closeAdminImportChildrenFormEvent')]
    public function closeAdminImportChildrenForm(): void
    {
        $this->showAdminImportChildrenForm = false;
    }
}

When data is loaded in, I want to rerender the Table component with the new data. I am sure #[AsEventListener('import.children')] is triggered because I get the log-message.

But for some reason Table is not showing the new data?