Using axios in Vue but data is not loading asynchronously - laravel

Question

I'm using Laravel with Vue as a front-end framework, and for ajax calls I'm using axios, but data is loading only when the page is refreshed.
Routes:
Route::get('/comment','CommentController#show');
Route::post('/store','CommentController#store');
Vue component:
<template>
<div>
<form>
<div class="form-group">
<label>title</label>
<input v-model="comment.title" type="text" class="form-control">
</div>
<div class="form-group">
<label>body</label>
<textarea v-model="comment.body" class="form-control" placeholder="Add comment.."></textarea>
</div>
<button #click.prevent="add()" class="btn btn-primary">Comment</button>
</form>
</div>
</template>
<script>
export default {
data(){
return{
comment:{
title:"",
body:""
}
}
},
methods:{
add: function(){
axios.post('/store',{
title: this.comment.title,
body: this.comment.body
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
}
}
</script>
CommentController:
public function show(){
$comments= comment::orderby('id','desc')->get();
return $comments;
}
public function store(Request $request){
$this->validate($request,[
'title'=> 'required',
'body' => 'required'
]);
comment::create([
'title'=> request('title'),
'body' => request('body')
]);
return redirect('/');
}