Dispatching Child Livewire Components on Conditional Views

I'm working with a parent Livewire component that conditionally renders a child component based on whether a certain variable (in this case, a username) is present. The intent is to load the parent’s main content quickly without waiting for the heavy queries associated with the child component. Once the parent view is rendered, an event is dispatched from the parent to the frontend JavaScript, which then dispatches another event to the child component.

@if ($username)
        Yes user is here: {{ $username }}
        <livewire:child-component />
@endif

I was able to see that if I put the <livewire:child-component /> outside the if then it works, feels like there is something missing somewhere

Code for all the components

Index blade view setting the livewire parent component

@section('page-link')
    @livewireStyles
@endsection

@section('content')

    <div class="row">
        <div class="container-fluid">
            <livewire:parent-component />
        </div>
    </div>
@endsection

@section('page-script')
    @livewireScripts
    <script>
        Livewire.on('notificationToJS', ($username) => {
            console.log($username);
            Livewire.dispatch('notificationToChild', [$username])
            console.log($username, '2');
        });
    </script> 
@endsection

Livewire parent component

<?php

namespace Vanguard\Http\Livewire;

use Livewire\Component;

class ParentComponent extends Component
{
    public $username = null;
    public function sendNotify()
    {
        $this->username = 'admin';
        $this->dispatch('notificationToJS'); 
    }

    public function render()
    {
        return view('livewire.parent-component');
    }
}

Livewire parent component view

<div>
    <button wire:click="sendNotify" class="btn btn-primary">Send Notify from parent</button>
    <div class="separator border-light my-10"></div>
    @if ($username)
        Yes user is here: {{ $username }}
        <livewire:child-component />
    @endif
    
</div>

Livewire child component view

<?php

namespace Vanguard\Http\Livewire;

use Livewire\Component;

class ChildComponent extends Component
{

    protected $listeners = ['notificationToChild' => 'notify'];

    public function notify()
    {
        dd('This dd is not reaching');
    }

    public function render()
    {
        return view('livewire.child-component');
    }
}

Livewire child component view

<div>
    child component
    <button wire:click="notify">Notify</button>
</div>