Dispatching an event when page loads

I am trying to open login modal when page loads if the user is not logged in.

I have put my login component in the layout, so it can dispatched from everywhere.

#[On('login-modal-open')]
    public function openLoginModal($title = 'Welcome Back 👋')
    {
        $this->title = $title ;
        $this->open = true;
    }

this is the what listens for the event.

<section class="mb-16 xl:mb-20" x-data="{ 
        initializeLogin() {
            if (!@json(auth()->check())) {
                alert('hello');
                Livewire.dispatchTo('v2.auth.login', 'login-modal-open');
            }
        }
    }" x-init="initializeLogin">
  ....
</section>

this is what i have tried now. This is in page which i am trying to open login component. i have also tried calling from script tag directly. nothing works.

How do i open login component here.

NB: Alert works fine.

Thanks in advance