Child component not found after parent change caused by a key update

Question

I use a value from a property as a :key to re-render completely a child component and it works fine:

<input wire:model="test" />
...
<livewire:test :data="$test" :key="$test" />

When I add another nested component inside that first test component, it still works fine.

But if the first component register an event listener with #[On()], and that event is dispatched after the model update... Livewire throw an exception Component not found on the second component.

For me it looks like a bug, but I may miss something.

Notes:

• despite the exception, the property update is still working
• if I remove the dispatch(...), no more exception
• if I remove the #[On()], no more exception
• if I remove the test2 component, no more exception

Here is my simpliest way to reproduce (see https://wirebox.app/b/yr567) :

The parent page component :

class TestPage extends Component
{
    public $test = "NOPE";
    
    public function doUpdate(){
        $this->dispatch("whatever");
    }

    public function render()
    {
        return <<<'HTML'
        <div>
            <form wire:submit.prevent="doUpdate">
                TEST PAGE : 
                <input wire:model="test" /><button type="submit">save</button>
            </form>
            <hr />
            <livewire:test :data="$test" :key="'TEST' . $test"/>
        </div>
        HTML;
    }
}

First component :

class Test extends Component
{
    public $data = "Test1";
    
    #[On('whatever')]
    public function triggeredEvent($data) {
        Log::notice("Test::triggeredEvent", [$data]);
    }

    public function render()
    {
        return <<<'HTML'
        <div>
            <p>TEST COMPONENT : {{ $data }} <br/>ID:{{ $this->__id }}</p>
            <hr />
            <livewire:test2 :data="$data . '-nested'" :key="$data . '-test2'"/>
        </div>
        HTML;
    }
}

Second component

class Test2 extends Component
{
    public $data = "test2";
    
    public function render()
    {
        return <<<'HTML'
        <p>
            TEST 2 COMPONENT : {{ $data }}<br/>ID:{{ $this->__id }}
        </p>
        HTML;
    }
}