Vue-Resource Authorization header unable to set

Unable to set authorization header to "Bearer (token)" in main.js file after Sign In, shows 401 unauthorized but the headers are set after refresh while accessing files list from server

Detailed Description:

Specs:

1. Vue @ 2.2.1
2. Vue Resource @ 1.3.4
3. Vue Router @ 2.6.0
4. Laravel @ 5.4
5. Laravel Passport @ 2.0

Details:

I use "Sign In" module to sign in and store access and refresh tokens and expiration in local storage using an Auth package as follows -

[ Image Desc: Auth Package code (setters and getters for token) ]

[ Image desc: Sign in module snippet to set token on arrival -- Works correctly ]

As shown above, the route goes to 'dash', which loads files module but fails to fetch data from https://localhost:8000/api/files

[ Image desc: unauthorized without refresh ] [4

[ Image desc: without refresh, Vue.http.headers.common['Authorization'] shows "Bearer null" ]

But passes the token after refreshing the page...!

[ Imag desc: after refresh, the token is passed successfully ]

And keeps on working until I don't refresh on sign in page after signing out and sign in again.

Any solutions will be appreciated.

via Chebli Mohamed