VueRouter sometime change URL but doesn't change component - vue-router

Question

I'm new in vue3. One of my component have a strange reaction. I use vue router/ router-link tags in many components without problems, but in one of them, when I click a button, url correctly change but doesn't refresh to the new component until I press F5. The structure is not different from other components :(
Thanks in advance
Component :
<template>
<router-link :to="{ name: 'List', params : {pageId : 1 }}"><Btn msg="Retour à la liste des derniers messages"/></router-link>
<div class="originalMsg">
<h3>{{ originMsg.title }}</h3>
<p>Auteur : {{ originMsg.User.firstname +' '+ originMsg.User.lastname}} - Date de rédaction: {{ originMsg.creation_date }}</p>
<div class="content">
{{ originMsg.content }}<br>
<hr>
<router-link :to="{ name: 'NewMessage', query:{ responseTo : originMsg.id}}"><Btn msg="Répondre"/></router-link>
<router-link :to="{ name: 'Modify', query:{ id : originMsg.id, title : originMsg.title, content : originMsg.content}}"><Btn msg="Modifier"/></router-link>
</div>
</div>
<div v-if="responses.length>0" class="responses">
<p v-for="(response, index) in responses" :key="index"> {{ response }}</p>
</div>
</template>
<script>
import Btn from "../components/Button.vue";
export default {
name: "Message",
components:{
Btn
},
data(){
return{
originMsg:{},
responses:[],
}
},
async beforeCreate(){
let tmp = this.$route.query.parentMsg
if(this.$route.query.parentMsg==null){
tmp = this.$route.params.msgId
}
//récupère message d'origine
let parentMsg = await fetch(this.$store.state.src + 'message/' + tmp,{
method: "POST",
headers: {
'authorization': 'bearer ' + localStorage.getItem('token'),
'content-type': 'application/json'
},
body: JSON.stringify({userId:parseInt(localStorage.getItem('userId'))})
});
parentMsg = await parentMsg.json();
this.originMsg = parentMsg.msg;
//récupère tableau de réponses
let responseList = await fetch(this.$store.state.src + 'message/responses/' + tmp,{
method: "POST",
headers: {
'authorization': 'bearer ' + localStorage.getItem('token'),
'content-type': 'application/json'
},
body: JSON.stringify({userId:parseInt(localStorage.getItem('userId'))})
});
responseList = await responseList.json()
this.responses = responseList.list
}
};
</script>
router.js:
import { createRouter, createWebHistory } from 'vue-router'
import Connect from '../views/Connect.vue'
import Signup from '../views/Signup.vue'
import Reinit from '../views/Reinit.vue'
import Welcome from '../views/Welcome.vue'
import Profil from '../views/Profil.vue'
import List from '../views/List.vue'
import Message from '../views/Message.vue'
import NewMessage from '../views/NewMessage.vue'
import NotFound from '../views/NotFound.vue'
const routes = [
{
path: '/',
name: 'Login',
component: Connect
},
{
path: '/signup',
name: 'Signup',
component: Signup
}, {
path: '/reinit',
name: 'Reinit',
component: Reinit
}, {
path: '/home',
name: 'Welcome',
component: Welcome,
children: [{
path: 'list/:pageId',
name:"List",
component: List
},{
path: 'profil/:userId',
name:"Profil",
component: Profil
},{
path: 'message/:msgId',
name: "Message",
component: Message
},{
path: 'message/new',
name: "NewMessage",
component: NewMessage
},{
path: 'message/modify',
name : "Modify",
component: NewMessage
}]
},{ path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound },
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
EDIT : I just see this but don't understand it
screenshot
EDIT2: for some old unknown reasons, I put, in an other component (List.vue), a :
watch: {
$route(to, from) {
if(to !== from){location.reload();}
}
}
When I remove it, it almost works. Now, routing is ok, but the destination component (ex: List) doesn't replace the Message component, but take place above. It's strange because I don't have router views in those components, only in their parent (Welcome.vue) component :(
List and Message components at the same time screenshot :(