`onUnmount` is not automatically called in `useEchoNotification`

[Lukasss93]

Echo Version

@laravel/echo-vue 2.2.0

Laravel Version

12.29.0

PHP Version

8.4.2

NPM Version

10.9.2

Database Driver & Version

MySql 8.4.5 (Ubuntu x64)

Description

When using the useEchoNotification hook inside a component that is part of the app layout, the onUnmount function is not automatically triggered.
This causes the logic inside the callback passed to useEchoNotification to be duplicated, as shown in the attached screenshot.

Expected behavior

When the component is unmounted, the subscription should be properly cleaned up so that the callback is not executed multiple times.

Current behavior

The callback is registered multiple times and therefore executed multiple times for each notification.

Possible solution
I suspect it is necessary to add the following code inside useEchoNotification to properly handle component unmount:

onUnmounted(() => {
    result.leave();
});

Screenshot

Steps To Reproduce

1. Create a component that is part of the app layout.
2. Inside the component, use the useEchoNotification hook with a simple callback (e.g. console.log('Notification received')).
3. Navigate through the application so that the layout component is mounted/unmounted multiple times.
4. Trigger an event that should call the notification callback.
5. Observe that the callback is executed multiple times instead of once.

[thoresuenert]

The same issue exists in the react implementation: #458

[Lukasss93]

fixed in #459 (echo v2.2.4)