Vue router loading in wrong place

I am trying to integrate vue-router into my Laravel app

I have a on my root view and also in my settings page

If the user is on the /settings/password component and reloads, why does the root view load and embed the /settings/password component into it? I am trying to nest the root view components under '/' and the settings component under '/settings'

Here is my code

// There is a router-view on my root page

{
    path: '/',
    component: require('./views/One'),
    children: [
        {
            path: 'first',
            component: require('./views/First')
        },
        {
            path: 'second',
            component: require('./views/Second')
        }
    ]
},

// There is another router view on my Settings page

{
    path: '/settings',
    name: 'settings',
    component: require('./views/Settings'),
    children: [
        {
            path: 'password',
            component: require('./views/Password')
        },
        {
            path: 'details',
            component: require('./views/Details')
        }
    ]
}

Everything loads correctly, but if the user is on /settings/password and refreshes the page, the root view pages with the settings/password component. How can I restrict the settings component to the settings page?!

via Dazzle