Listener for refresh component is triggered but $refresh is doing nothing

I have two child components nested within a Bank Details page. One to edit and one is to create. When I create a record I need the page to navigate to the respective edit tab, where the new record should be displayed as the data will always pull the most recently updated. To achieve this I am trying to fire an event from the create component $this->dispatch('bank-account-created');, which is then listened for in the edit component.

    #[On('bank-account-created')]
    public function newAccount()
    {
        $this->dispatch('refreshComponent');
    }

As far as I can tell, the event is fired and is listened to, however the helper function $refresh simply isn't working and I have no idea what it is that I'm doing wrong.

bank-details.blade.php

<div>
    <!-- Main Block -->
    <div class="p-4 lg:p-8 lg:mt-[4.5rem]">
        <div class="p-2 bg-white w-full rounded shadow-md">

            <div class="px-4 m-4">
                <h1 class="text-lg lg:text-2xl font-medium text-center">Your Banking Details</h1>
            </div>

            <x-tabs.tab-layout defaultTab="standard">
                <x-slot:headers>
                    <x-tabs.tab-header index="{{ 'standard' }}" title="Standard Bank Details"/>
                    <x-tabs.tab-header index="{{ 'add' }}" title="Add New Bank Details"/>
                </x-slot:headers>

                <x-slot:contents>
                    <x-tabs.tab-content index="standard">
                        <livewire:investor.components.bank-details-edit/>
                    </x-tabs.tab-content>
                    <x-tabs.tab-content index="add">
                        <livewire:investor.components.bank-details-create/>
                    </x-tabs.tab-content>
                </x-slot:contents>
            </x-tabs.tab-layout>

        </div>
    </div>
    <!-- End Main Block -->

</div>

bank-details-create.blade.php

<div>
    <div class="flex flex-row mt-5" x-init="$wire.on('change-active-tab', (e) => activeTab = e[0])">
        <form wire:submit="save" class="w-full">
            <div class="bg-white border px-8">
                <div class="w-full my-8">
                    <div class="mt-4 grid grid-cols-1 lg:grid-cols-2 gap-4 items-end">
                        <label>
                            <span class="block">Select Bank Account Type<span class="align-super text-red-600">*</span></span>
                            <x-input.select-input wire:model.change="account_type"
                                                  class="mt-2 p-2 w-full"
                                                  :options="$this->account_types"
                            />
                            <x-input.input-error :messages="$errors->first('account_type')" class="mt-2"/>
                        </label>                       
                </div>

            </div>

            <div>
                <button type="submit"
                        class="mt-2 p-2 bg-cp-accent-dark-blue text-white text-sm rounded-md float-right">
                    Add Account
                </button>
            </div>
        </form>
    </div>
</div>

BankDetailsCreate.php

<?php

namespace App\Livewire\Investor\Components;

use Livewire\Attributes\On;
use Livewire\Attributes\Validate;

class BankDetailsCreate extends Component
{
    public array $account_types = [];

    public ?int $account_type = null;

    public function save()
    {
        //VALIDATE + CREATE DETAILS

        $this->dispatch('bank-account-created');

        $this->dispatch('change-active-tab', $activeTab);
    }

    public function mount()
    {
                $this->account_types['Standard'] = 3;
    }

    public function render()
    {
        return view('investor.components.bank-details-create');
    }

}

BankDetailsEdit.php

<?php

namespace App\Livewire\Investor\Components;

use Livewire\Attributes\On;

class BankDetailsEdit extends Component
{
    protected $listeners = [
        'refreshComponent' => '$refresh'
    ];

    public function mount()
    {
        //INITIALISE DATA

        $this->setBankDetails();
    }

    public function save()
    {
         //VALIDATE + UPDATE DATA

        $this->dispatch('refreshComponent');
    }

    #[On('bank-account-created')]
    public function newAccount()
    {
        $this->dispatch('refreshComponent');
    }

    public function render()
    {
        return view('investor.components.bank-details-edit');
    }

}

BankDetails.php

<?php

namespace App\Livewire\Investor\Pages;

use App\User;

class BankDetails extends Component
{
    public User $user;

    public function mount()
    {
        $this->user = auth()->user();
    }

    public function render()
    {
        return view('investor.pages.bank-details');
    }

}