Не совсем верно отрабатывает middleware auth в Larvel Vue js. Почему не могу понять

Ситуация следующая:

Я в контроллер, который ведет на страницу с Админкой - пытаюсь вставить функцию конструктор -

namespace App\Http\Controllers\Admin;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class MainController extends Controller
{

public function __construct()
        {
            $this->middleware('auth:api');
        }

    public function index(){
        return view('admin.index');
    }
}

Которая не даёт мне доступ без авторизации на сайте. Но когда пытаюсь авторизоваться - зайти на эту страницу не получается, постоянно перебрасывает заново к логину. Помогите разобраться, что я делаю не так ? Использую Vue js + Laravel . И я уверен проблема в Slug'e - чтобы правильно работал Vue

Мои маршруты в web

Route::group(['prefix' => 'admin', 'namespace' => 'admin'], function (){
   Route::get('/', 'MainController@index')->name('admin.index');
});

Route::get('{slug}', function () {
    return view('welcome');
})->name('home');

В контроллере -

class MainController extends Controller
{

    public function index(){

        return view('admin.index');

    }
}

В router.js у меня такой код

import Vue from 'vue';
import Router from 'vue-router'
Vue.use(Router);

import firstPage from './components/pages/myFirstVuePage'
import profile from './components/pages/ProfileComponent'
import categories from './components/pages/CategoriesComponent'
import developer from './components/pages/DeveloperComponent'

const routes = [
    {
        path: '/my-new-vue-route',
        component: firstPage
    },
    {
        path: '/profile',
        component: profile
    },
    {
        path: '/categories',
        component: categories
    },
    {
        path: '/developer',
        component: developer
    },
];

export default new Router({
    mode: 'history',
    routes
});

В app.js такой код -

require('./bootstrap');

window.Vue = require('vue');
import router from './router';
import { Form, HasError, AlertError } from 'vform';

window.Form = Form;
Vue.component(HasError.name, HasError);
Vue.component(AlertError.name, AlertError);

Vue.filter('upText', function (text) {
    return text.charAt(0).toUpperCase() + text.slice(1);
});

/*moment npm*/

import moment from 'moment';

Vue.filter('myDate', function (created) {
    return moment(created).format('MMMM Do YYYY, h:mm:ss a');
});

/*filter*/

/*proress bar*/

import VueProgressBar from 'vue-progressbar';

const options = {
    color: '#4a42fa',
    failedColor: '#874b4b',
    thickness: '15px',
    transition: {
        speed: '0.9s',
        opacity: '0.6s',
        termination: 300
    },
    autoRevert: true,
    location: 'top',
    inverse: false
};

Vue.use(VueProgressBar, options);

/*Sweet alert*/

import swal from 'sweetalert2';
window.Swal = swal;

const Toast = Swal.mixin({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000,
    timerProgressBar: true,
    didOpen: (toast) => {
        toast.addEventListener('mouseenter', Swal.stopTimer);
        toast.addEventListener('mouseleave', Swal.resumeTimer);
    }
});

window.toast = Toast;

/*Всплывающее окно*/

let Fire = new Vue();
window.Fire = Fire;

/*Laravel passport*/

Vue.component(
    'passport-clients',
    require('./components/passport/Clients.vue').default
);

Vue.component(
    'passport-authorized-clients',
    require('./components/passport/AuthorizedClients.vue').default
);

Vue.component(
    'passport-personal-access-tokens',
    require('./components/passport/PersonalAccessTokens.vue').default
);

/*Laravel passport*/

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