CSRF Token Duplication on Vue Router Laravel 5.3 Vue 2 JS

So my problems is that the session token is generated.

and the token that i've sent via AJAX or AXIOS (cause im using vue and vue router for fetching API)

is getting a mismatch

This is the response i got when posting data

The ajax token is equal to the token in the meta tag of the main blade template

using this tag

Meta Tag in app.blade.php

<meta name="csrf-token" content="">
<script>
    window.Laravel = <?php echo json_encode([
        'csrfToken' => csrf_token(),
    ]); ?>
</script>

Interceptor of Axios (purpose is to inject the csrf_token from the meta Tag)

Vue.axios.interceptors.request.use(function (config) {

    config.headers['X-CSRF-TOKEN'] = Laravel.csrfToken;
    console.log(config);
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
});

Response:

array:1 [
  "SessionToken" => "JfhmtCaTiQ49BtF2VK3TysvYnEQSE9n5i1uiHegO"
]
array:1 [
  "AjaxToken" => "WqKOiaunbvJbxIsnEjetFoCm1mvdUYESRqfXO2lv"
]

VerifyCSRFToken middleware method:

  protected function tokensMatch($request)
    {
        $sessionToken = $request->session()->token();

        $token = $request->input('_token') ?: $request->header('X-CSRF-TOKEN');

        dd(['SessionToken' => $sessionToken],['AjaxToken' => $token]);
        if (! $token && $header = $request->header('X-XSRF-TOKEN')) {
            $token = $this->encrypter->decrypt($header);
        }

        if (! is_string($sessionToken) || ! is_string($token)) {
            return false;
        }

        return hash_equals($sessionToken, $token);
    }

So i came up with this idea but its not working because its the token that im getting from the api is null or empty

Here is the method from my RegisterComponent.vue

    submitForm() {
        this.axios.get('/token')
            .then(response => {
               this._token = response.data
                   this.axios.post('/register',this.data)
                        .then(responseNew => {
                            console.log(responseNew.data);
                        })
                        .catch(responseNew => {
                            this.errors = responseNew.data;
                        })
            });
    }

as you can see im getting a token from my api.php in routes folder

and im also using the authentication api of Laravel and put it on the api routes too

Here is the api.php

Route::group(['middleware' => 'web'], function() {
    Auth::routes();
});

Route::get('/token',function() {
   dd(csrf_field());
});
Route::get('/user', function (Request $request) {
    return $request->user();
})->middleware('auth:api');

Route::resource('/users','UserController');

Route::group(['middleware' => 'auth'], function () {


Route::resource('/stores','StoreController');

Route::resource('/items','ItemController');

Route::resource('/transactions','StoreController');

Route::resource('/managers','ManagerController');

Route::resource('/employees','EmployeeController');

Route::resource('/customers','CustomerController');

Route::resource('/tags','TagController');

});

So how can i prevent it from generating that token that will cause mismatch?

Anyone answering this will surely help the authentication of my SPA ( Single Page App)

and its also giving me response status 302

via Chebli Mohamed