Laravel Passport and Vue.js authenticated

Hy guys, I have been trying to solve this problem for some time now and I ask for your help.

I have in my AuthController the my login function :

    public function login() {

        // Check if a user with the specified email exists
        $user = User::where('email',request('username'))->first();
        if (!$user) {
            return response()->json([
                'message' => 'Wrong email or password',
                'status' => 422
            ], 422);
        }

        // If a user with the email was found - check if the specified password
        // belongs to this user
        if (!Hash::check(request('password'), $user->password)) {
            return response()->json([
                'message' => 'Wrong email or password',
                'status' => 422
            ], 422);
        }

        // Send an internal API request to get an access token
        $client = DB::table('oauth_clients')
                    ->where('password_client', true)
                    ->first();

        // Make sure a Password Client exists in the DB
        if (!$client) {
            return response()->json([
                'message' => 'Laravel Passport is not setup properly.',
                'status' => 500
            ], 500);
        }

        $data = [
            'grant_type' => 'password',
            'client_id' => $client->id,
            'client_secret' => $client->secret,
            'username' => request('username'),
            'password' => request('password'),
        ];

        $request = Request::create('/oauth/token', 'POST', $data);
        $response = app()->handle($request);

        // Check if the request was successful
        if ($response->getStatusCode() != 200) {
            return response()->json([
                'message' => 'Wrong email or password',
                'status' => 422
            ], 422);
        }
        // Get the data from the response
        $data = json_decode($response->getContent());

        // Format the final response in a desirable format
        return response()->json([
            'token' => $data->access_token,
            'user' => $user->getAttributes(),
            'status' => 200
        ]);
    }

In Vue i have my app.js :

import Vue from 'vue';
import VueRouter from 'vue-router';

import axios from 'axios';
import auth from './auth'
import routes from './routes'// Set Vue globally
import Layout from './components/Layout'


Vue.use(VueRouter)// Set Vue authentication
Vue.use(axios)
Vue.use(auth)// Load Index


Vue.component('vue-layout', Layout);

let app = new Vue({
    el: '#app',

    router: new VueRouter(routes)
});

my routes.js;

import Login from './components/Login';
import About from './components/About';
import Dashboard from './components/Dashboard';
import Home from "./components/Home";
import Register from "./components/Register";


export default {
    mode: 'history',

    routes: [
        {
            path: '/',
            component: Home
        },
        {
            path: '/about',
            component: About
        },
        {
            path: '/login',
            component: Login
        },
        {
            path: '/dashboard',
            component: Dashboard
        },
        {
            path: '/register',
            component: Register
        }
    ]
}

my auth.js:

class Auth {
    constructor () {
        this.token = window.localStorage.getItem('token');

        let userData = window.localStorage.getItem('user');
        this.user = userData ? JSON.parse(userData) : null;

        if (this.token) {
            axios.defaults.headers.common['Authorization'] = 'Bearer ' + this.token;
        }
    }

    login (token, user) {
        window.localStorage.setItem('token', token);
        window.localStorage.setItem('user', JSON.stringify(user));

        axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;

        this.token = token;
        this.user = user;

        Event.$emit('userLoggedIn');
    }

    check () {
        return !! this.token;
    }
}

the component Layout.vue

<template>
    <div>
        <div>
            <router-link to="/">Home</router-link>
            <router-link to="/about">About</router-link>
            <router-link to="/dashboard">Dashboard</router-link>
        </div>

        <div>
            <router-link to="/login">Login</router-link>
        </div>

        <div style="margin-top: 2rem">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                authenticated: auth.check(),
                user: auth.user
            };
        },
        mounted() {
            Event.$on('userLoggedIn', () => {
                this.authenticated = true;
                this.user = auth.user;
            });
        },
    }
</script>

and my component Login.vue

<template>
    <div>
        <h1>Login</h1>

        <p>
            <label for="username">Email</label>

            <input type="text" name="username" v-model="username">
        </p>

        <p>
            <label for="password">Password</label>

            <input type="password" name="password" v-model="password">
        </p>

        <button @click="login">Login</button>
    </div>
</template>

<script>
    import axios from 'axios';
    import auth from '../auth.js';

    export default {
        data() {
            return {
                username: '',
                password: '',
            };
        },

        methods: {
            login() {
                let data = {
                    username: this.username,
                    password: this.password
                };

                axios.post('/api/login', data)
                    .then(({data}) => {
                        // TODO: store data
                        auth.login(data.token, data.user);
                        this.$router.push('/dashboard');
                    })
                    .catch(({response}) => {
                        alert(response.data.message);
                    });
            }
        }
    }
</script>

api.php

Route::post('/register','Api\AuthController@register');
Route::post('/login','Api\AuthController@login');

Route::middleware('auth:api')->group(function (){
    Route::post('/logout','Api\AuthController@logout');
});

my app.blade.php:

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>My App</title>
</head>
<body>
<div id="app">
    <vue-layout></vue-layout>
</div>

<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

I have always the same error... why? Help me please...