How to forceUpdate vue data - laravel

Question

I am using vuejs with laravel and I have links for next and previous pages while url is changing but new data won't show.
Code
Controller
$verse = Chapter::where('slug', $slug)->with(['verses', 'book'])->first();
$next = Chapter::where('id', '>', $verse->id)->first();
$previous = Chapter::where('id', '<', $verse->id)->first();
return response()->json([
'verses' => $verse,
'next' => $next,
'previous' => $previous,
]);
component
<div v-if="previous !== null" :v-model="previous" class="bible-nav-button previous">
<router-link :to="`/${testament_slug}/${book_slug}/${previous.slug}`">
<i class="fas fa-chevron-left"></i> <span>Previous</span>
</router-link>
</div>
<div v-if="next !== null" :v-model="next" class="bible-nav-button next">
<router-link :to="`/${testament_slug}/${book_slug}/${next.slug}`">
<span>Next</span> <i class="fas fa-chevron-right"></i>
</router-link>
</div>
<script>
export default {
name: "books",
data() {
return {
url: window.location.origin + "" + window.location.pathname,
title: '',
testament_slug:'',
book_slug: '',
slug: '',
verses: [],
next: '',
previous: ''
}
},
methods: {
getBooks: function(){
this.testament_slug = this.$route.params.testament_slug
this.book_slug = this.$route.params.book_slug
this.slug = this.$route.params.slug
axios.get('/api/'+this.$route.params.book_slug+'/'+this.$route.params.slug+'/'+this.$route.params.slug).then((res) => {
this.verses = res.data.verses
this.title = "Read Bible: " +res.data.verses.book.name+ " " +res.data.verses.name
this.next = res.data.next
this.previous= res.data.previous
})
.catch((err) => {
console.log(err)
});
},
myHTML: function(item) {
return "<strong>"+item.number+"</strong> "+item.body+" ";
}
},
mounted() {
this.getBooks();
}
}
</script>
Any idea how i can fetch my new data?

Answer 1

You can use :key props in <router-view> tag and use the route fullpath.
<router-view :key="$route.fullPath"></router-view>
I used to put a watcher of the current route and call function to fetch data, but I just found that we can do this after watching vue-router tutorial from vueschool.
Also see the answer of this question

Answer 2

You have two simple options:
1) Change the "previous" and "next" to #click actions that call the fetch function again and then update the URL (like this this.$router.push()).
<span #click="goNext(/* needed arguments here */)">Next</span>
goNext (/* params here */) {
//set whatever variables you need to
this.$router.push(/* route as string here */)
this.getBooks()
}
2) Since you're using the router, use guards to update every time the URL changes:
https://router.vuejs.org/guide/advanced/navigation-guards.html
beforeRouteUpdate(to, from, next) {
this.getBooks()
next()
}