Vue 3 composition API with ref

I have Vue3 with composition api and Inertia with Laravel backend. I am using laravel echo to comunicate with soketi websockets server.

This is an SPA (Single page application using Inertia routing)

My question is related with ref on templates. On first page load, calendar ref is always defined no problems.

But if I go to other views and return to this component again, calendar ref is null inside listen callback.

It is related with some vue lifecycle that I cannot understand. It is possible to set ref calendar manually?

I already tried getCurrentInstance() from vue, set ref from function, etc.

link to vue 3 ref docs

const calendar = ref(null)

onMounted(() => {

      window.Echo.channel('myChannel')
      .listen('PlanningChanges', (e) => {

        console.log(calendar.value) //is null after second load

      })

})

<template>
   <Child ref="calendar"
   </Child>
</template>

Please add

onBeforeUnmount(() => {
    window.Echo.channel('myChannel')
      .stopListening('PlanningChanges')
})

it can be case that listened stays. But instance is already other one.