Some problems with vue router reload and components updating - arrays

Question

I'm actually working on a VueJs project where I meet some problems.
The 1st is that when I'm reloading page using parameters, I'm throwed back to the root page and I don"t understand why. I'm actually using the vue webpack template and lazy loading for my routes templates.
The 2nd problem is that I'm making a page of comments for my project who's are generated from a array of object. When the user has done posting his comment a new array is loaded from the database and put in the data of the parent as following :
parentComponent -> data -> array of objects -> each object = a component
So I used this.$set to put datas but it has not worked,I used a foreach loop and now I'm just replacing the array like this :
oldArray = new Array
But it doesn't work and my child components don't want to update even with forceUpdate().Maybe it's something very silly but I didn't found the answer.
If someone could have the answer that would be very nice to share it.
Here is my parent code:
<template>
<div class='comments'>
<div v-if="comments.length > 0" class="comments__block">
<comment-block v-for="comment in comments" :key="comment.Id" :comment.sync="comment" :updateHandler="loadComments"></comment-block>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Comments',
data () {
return {
page: 1,
comments: [],
numberPages: 0,
resultEmpty: false
}
},
components: {
'comment-block': commBlock,
},
computed: {
methods: {
loadComments (nextPage = 1) {
if (isLogged) {
axios
.get(`API query if logged)
.then(response => {
if (Success) {
if (Comments) {
this.comments = Comments
this.resultEmpty = false
} else {
this.resultEmpty = true
}
}
})
.catch(e => {
console.log(e)
})
} else {
axios
.get(`url if not logged`)
.then(response => {
if (Success) {
if (Comments) {
this.comments = []
Comments.forEach(c => {
this.comments.push(c)
})
this.resultEmpty = false
} else {
this.resultEmpty = true
}
}
})
.catch(e => {
console.log(e)
})
}
}
},
mounted () {
this.loadComments()
},
watch: {
'$route' (to, from) {
this.loadComments()
}
},
}
</script>
And for the children
<template>
<div class='comment-block'>
<div class="comment-block__header">
<div class="comment-block__username">
{{userName}}
</div>
<div v-if="isLogged" class="comment-block__likes">
<input v-model="like" class="comment-block__radio" type="radio" name="likes" id="like" value="Y"/><label class="comment-block__radio-label comment-block__radio-label--like" for="like" v-bind:class="{'comment-block__radio-label--liked': like == 'Y'}" #click="toggle('Y')">{{nbLikes}}<v-icon large color="white">keyboard_arrow_up</v-icon></label>
<input v-model="like" class="comment-block__radio" type="radio" name="likes" id="dislike" value="N"/><label class="comment-block__radio-label comment-block__radio-label--dislike" for="dislike" v-bind:class="{'comment-block__radio-label--liked': like == 'N'}" #click="toggle('N')">{{nbDislikes}}<v-icon large color="white">keyboard_arrow_down</v-icon></label>
<input v-model="like" class="comment-block__radio" type="radio" name="likes" id="disapproved" value="D"/><label class="comment-block__radio-label comment-block__radio-label--disapproved" for="disapproved" v-bind:class="{'comment-block__radio-label--liked': like == 'D'}" #click="toggle('D')">{{nbDisapproved}}<v-icon large color="white">report</v-icon></label>
</div>
<div v-else class="comment-block__likes">
<button class="comment-block__button" #click="displayMessage = ! displayMessage" id="like"><p class="comment-block__radio-p comment-block__radio-p--like" for="like">{{comment.NbLikes}}<v-icon large color="white">keyboard_arrow_up</v-icon></p></button>
<button class="comment-block__button" #click="displayMessage = ! displayMessage" id="dislike"><p class="comment-block__radio-p comment-block__radio-p--dislike" for="dislike">{{comment.NbDislikes}}<v-icon large color="white">keyboard_arrow_down</v-icon></p></button>
<button class="comment-block__button" #click="displayMessage = ! displayMessage" id="disapproved"><p class="comment-block__radio-p comment-block__radio-p--disapproved" for="disapproved">{{comment.NbDisapproved}}<v-icon large color="white">report</v-icon></p></button>
</div>
</div>
<div class="comment-block__body">
<div cols="12">
<div class="comment-block__commentary">
{{commentary }}
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Comments',
data () {
return {
id: this.comment.idComment,
userName: this.comment.UserName,
commentary: this.comment.Commentary,
nbLikes: this.comment.NbLikes,
nbDislikes: this.comment.NbDislikes,
nbDisapproved: this.comment.NbDisapproved,
displayedLikes: this.nbLikes,
displayedDislikes: this.nbDislikes,
displayedDisapproved: this.nbDisapproved,
lastLike: this.comment.LastLike,
like: this.comment.LastLike,
displayMessage: false
}
},
props: {
comment: {type: Object, required: true},
updateHandler: {type: Function, required: true}
},
computed: {
isLogged () {
if (this.$store.state.jwt.token) {
return true
}
return false
}
},
methods: {
submitLike () {
var payload = {
IdComment: this.id,
Like: this.like
}
var header = {
headers: {
Authorization: this.$store.state.jwt.token
}
}
axios
.post('someUrl', payload, header)
.then(resp => {
if (Success) {
this.updateHandler()
}
})
.catch(e => {
console.log(e)
})
},
toggle (value) {
if (value === this.like) {
this.like = ''
}
}
},
watch: {
like (newVal, oldVal) {
if (newVal !== oldVal) {
this.submitLike()
switch (oldVal) {
case 'Y' : this.nbLikes--
break
case 'N' : this.nbDislikes--
break
case 'D' : this.nbDisapproved--
break
}
switch (newVal) {
case 'Y' : this.nbLikes++
break
case 'N' : this.nbDislikes++
break
case 'D' : this.nbDisapproved++
break
}
}
if (oldVal === newVal) {
this.like = ''
}
},
comment (newVal) {
this.$forceUpdate()
}
}
}
</script>
PS: Sorry for my bad english if it is.