Vue.js刷新页面时返回JSON

Question

I am new to vue.js , and I am loving it already, except for the fact that I am stocked with an ugly part I don't like which is "page returns JSON when I hit on refresh"

However if I go through the master page, i.e the main page it loads correctly as expected, but if I click on refresh I get a JSON response.

I am using laravel for my backend, in my controller, I am returning a JSON Response (yes I know), however, I am kind of expecting vue.js to auto-detect links for me and do its magic like it would if I go to the link/page from the master page.

Here is what the controller returning the item to the master page looks like

public function index()
{
    //
        $task = TodoTask::orderBy('created_at', 'desc')->paginate(4);
        return equest()->json(200, $task);

}

I have done quite a couple of research on this, and I got to understand from this link https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations that I have got to configure my .htaccess file to be able to do so.

Here is what my .htaccess file looks like

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

What might I possibly be doing wrong?

my vue routes

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');


window.Vue = require('vue');
import VueRouter from 'vue-router';

window.Vue.use(VueRouter);

Vue.component('example-component', require('./components/ExampleComponent.vue'));
//Vue.component('tasks', require('./components/TodoTask.vue'));
const example = require('./components/ExampleComponent.vue');
const Samplelink = require('./components/SampleComponent.vue');
const task = require('./components/TodoTask.vue');



const routes = [{
    path: '/example',
    component: example

}, {
    path: '/sample',
    component: Samplelink
}, {
    path: '/tasks',
    component: task
}];

const router = new VueRouter({
    mode: 'history',
    routes
});


const app = new Vue({
    el: '#app',
    router
}).$mount('#app');