Problem with Router Push and Toast Notifications in Laravel and VUE 3 - laravel

Question

I have a problem and it is that when switching between components with router.push the Toast notification is not shown. I have the user edit view and what I want to do is redirect to the user's profile once it has been edited and immediately show the toast notification.
Roughly, I have the following:
Routes.js
import { createRouter, createWebHistory } from 'vue-router';
//Modules
import DashboardIndex from './components/modules/dashboard';
//Users
import UsersIndex from './components/modules/users';
import UsersCreate from './components/modules/users/create';
import UsersEdit from './components/modules/users/edit';
import UsersView from './components/modules/users/view';
export default new createRouter({
history: createWebHistory(),
routes: [
{ path: '/', name: 'dashboard.index', component: DashboardIndex },
{ path: '/users', name: 'users.index', component: UsersIndex},
{ path: '/user/create', name: 'user.create', component: UsersCreate},
{ path: '/user/edit/:id', name: 'user.edit', props: true, component: UsersEdit},
{ path: '/user/:id', name: 'user.view', props: true, component: UsersView},
]
})
Composable/users.js
import axios from 'axios';
import { useRouter } from 'vue-router'
import { useToast } from 'primevue/usetoast';
export default function useUsers() {
const users = ref([])
const user = ref([])
const errors = ref([])
const router = useRouter()
const toast = useToast()
/**
*
* All Users
*
*/
const getUsers = async () => {
const response = await axios.get('/admin/users')
users.value = response.data
}
/**
*
* Create User
*
*/
const storeUser = async (data) => {
try {
let response = await axios.post('/admin/user', data)
await router.push({ name: 'user.view', params: { id: response.data.id } })
} catch (e) {
if (e.response.status === 422) {
errors.value = e.response.data.errors
}
}
}
/**
*
* Create User
*
*/
const updateUser = async (id) => {
try {
//this.showToast = true;
let response = await axios.put(`/admin/user/${id}`, user.value)
router.push({ name: 'user.view', params: { id: response.data.id } })
toast.add({severity:'success', summary: 'Éxito', detail: 'El Usuario ha sido modificado', life: 3000})
} catch (e) {
if (e.response.status === 422) {
errors.value = e.response.data.errors
}
}
}
/**
*
* View User
*
*/
const showUser = async (id) => {
let response = await axios.get(`/admin/user/${id}`)
user.value = response.data
}
/**
*
* Delete User
*
*/
const destroyUser = async (id) => {
await axios.delete(`/admin/user/${id}`)
}
return {errors, users, user, getUsers, storeUser, updateUser, showUser, destroyUser}
}
View.vue
<template>
<div class="container-fluid">
<Toast position="bottom-right"/>
USER PROFILE
</div>
</template>
<script>
import useUsers from '../../../composables/users'
import { onMounted } from 'vue';
export default {
props: {
id: { required: true }
},
setup(props) {
const { user, showUser } = useUsers();
const showUserMounted = async () => {
await showUser(props.id)
}
onMounted(showUserMounted)
return { user }
}
}
</script>
Important fact, I'm using Prime VUE.
And additionally I comment that, when I move to toast.add({severity:'success', summary: 'Success', detail: 'The User has been modified', life: 3000}) inside showUser it is shown well the toast message.
I think what I need is a flag that changes the value in the updateUser method (for example showToast = true) and from the showUser method verify if it is true, if so, execute the toast.add, but I don't know how to do this last.
Thank you very much.