How to make vue-router mode history work with laravel routes

I currently have a SPA using Vuejs VueRouter and Laravel. What I am trying to do is to make the experience as smooth as possible for the user. I have laravel routes as well as vue routes defined. The currently problem I am facing is that when I set mode: history and then refresh the page. It shows the data as json.

Lets say I hit this endpoint:

localhost:8080/user

The page will show as expected (Vue component in this case)

But if I refresh the page, it will show this:

user {

name: "test",
id: "1"

}

This is the vue routes I have

export default {
    mode: 'history',

    routes: [
        {
            path: '/user',
            name: 'user',
            component: User
        }
    ]
}

This is the laravel routes I have

Route::get('user', 'UserController@index');


Route::get('/{any}', 'AppController@index')->where('any', '.*');

How will I be able to still show the vue component on page refresh and not what the method returns from the backend

via Chebli Mohamed