Laravel Sanctum Help - 401 Error

So I am running into a 401 error when attempting to get the user from a sanctum protected route. Was hoping to get some help as what I am doing is a little confusing.

I am using vue cli, vue router, Laravel 7. Note, we did recently updated from laravel 5.4 to laravel 7. My first thought was maybe a new setting or config didn't get copied over, but I haven't found anything yet.

Also worth noting I am using https://github.com/nWidart/laravel-modules

Vue and laravel are hosted on the same server, same domain.

First, on my local machine I have a vhost setup.

<VirtualHost *> 
    DocumentRoot "/Users/jeff/Development/www/server/public" 
    ServerName dev.server.com
</VirtualHost>

So my url is http://dev.server.com

My Config is

SESSION_DRIVER=database
SESSION_DOMAIN=.server.com
SANCTUM_STATEFUL_DOMAINS=dev.server.com,localhost,127.0.0.1

Instead of the users table, we are using another table called Attendants. So I setup a guard and provider.

'guards' => [
        'web' => [
            'driver' => 'session',
            'provider' => 'users',
		],
		
		'web_attendant' => [
            'driver' => 'session',
            'provider' => 'attendants',
		],

        'api' => [
            'driver' => 'token',
            'provider' => 'users',
        ],

        'sanctum' => [
            'driver' => 'sanctum',
            'provider' => 'users',
		],

		'sanctum_attendant' => [
            'driver' => 'sanctum',
            'provider' => 'attendants',
        ],
    ],

    'providers' => [
        'users' => [
            'driver' => 'eloquent',
            'model' => Modules\User\Entities\User::class,
            'table' => 'users'
        ],

        'attendants' => [
			'driver' => 'eloquent',
            'model' => Modules\Webinar\Entities\Attendant::class,
            'table' => 'attendants'
        ],
    ],

my cors config

    'paths' => [
        'api/*',
        'sanctum/csrf-cookie'
    ],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

So because we are using a different table, I created a new login controller. But basically I do this in the end

Auth::guard('web_attendant')->login($attendant);

I have actually dd(Auth::guard('web_attendant')->user(); and the Attendant model shows up just fine here.

On a success login return response, I use vue-router to change components. The returned user shows up just fine on the new component. But if I refresh the page, I get a 401: unauthorized error. And when I attempt to get the webinar, i get a 401 error as well.

Route::group(['middleware' => [ 'auth:sanctum_attendant', 'bindings' ], 'prefix' => 'webinar', 'namespace' => 'Api' ], function()
{
    ///
}

My axios has the following defaults

Vue.prototype.$axios = require('axios');
Vue.prototype.$axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
Vue.prototype.$axios.defaults.baseURL = defaultPath;
Vue.prototype.$axios.defaults.withCredentials = true;

my axios call is

this.$axios.get(`/webinar/${this.id}`).then(({data}) => {
   //
});

In my cookies I so see laravel_session and XSRF-TOKEN

I can't help feeling like I am missing something. Any help would be appreciated.