Event listeners not working in laravel-livewire 3

#1

I am currently debugging an event that I have dispatched to be listened to where once the event is dispatched other components can listen and emit the event. Here is my code

CreatePost.php

<?php

namespace App\Livewire;

use Livewire\Attributes\Rule;
use Livewire\Component;
use App\Models\Post;

class CreatePost extends Component
{
    #[Rule('required')]
    #[Rule('min:5')]
    public $title;

    #[Rule('required')]
    #[Rule('min:10')]
    public $content;

    public function updated($propertyName)
    {
        $this->validateOnly($propertyName);
    }

    public function save()
    {
        $this->validate();

        $post = Post::create([
            'title' => $this->title,
            'content' => $this->content,
        ]);

        $this->dispatch('post-created', title: $post->title);
        
        return redirect()->to('/posts')
            ->with('status', 'Post created!');
    }
}

and ShowPost Component

<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\Attributes\On;
use App\Models\Post;

class ShowPosts extends Component
{
    public $posts;

    public function mount()
    {
        $this->posts = Post::all();
    }

    #[On('post-created')] 
    public function refreshPosts($title)
    { 
        $this->posts = Post::all();

        session()->flash('message', 'A new post was created:' . $title);
    }

    public function render()
    {
        return view('livewire.show-posts');
    }
}

This component will listen to the CreatePost component and display the event but it’s not shown when I create a new post here

show-posts.blade.php

<div>
    <h1>All Posts</h1>
    @if (session()->has('message'))
        <div class="alert alert-success">
            {{ session('message') }}
        </div>
    @endif
    @foreach($posts as $post)
        <div>
            <h3>{{ $post->title }}</h3>
            <p>{{ $post->content }}</p>
            <livewire:show-comments :postId="$post->id" :key="$post->id"/>
        </div>
    @endforeach
   
</div>