Laravel Sanctum - 419 CSRF token mismatch using a Vue SPA - php

Question

There are loads of posts around the Internet related to this so I apologise if I've missed the answer here, but I seem to be going round in circles even after looking at all the existing answers. I'm clearly overlooking something.
I have a Laravel app which was recently upgraded from 6 to 8 which is being served locally under api.company-name.local. I also have a separate Vue front-end SPA being served under app.company-name.local:8080. I seem to get a successful response after getting the cookie, however when I hit my login endpoint I get a 419 - CSRF Token Mismatch response.
Setup
The Laravel app sits containerised locally with Docker, front-end simply being served up with npm run serve and I have entries in my hosts file for:
127.0.0.1 api.company-name.local
127.0.0.1 app.company-name.local
Front-End
I make a request to api.company-name.local/sanctum/csrf-cookie from within the front-end app which returns a 204 response, and then make a POST request to my login endpoint to authenticate the user.
const login = async () => {
await axios.get('/sanctum/csrf-cookie')
.then(() => {
axios.post('/loginUser', {
username: 'my-username',
password: 'my-password',
})
})
}
Observing the login POST request, I can see two cookies being sent in the request headers.
In my main.ts file I have configured the following axios defaults:
axios.defaults.withCredentials = true
axios.defaults.baseURL = 'http://api.my-company.local'
Back-End
I have updated my .env file to the following:
SESSION_DRIVER=cookie
SESSION_DOMAIN=app.company-name.local (have also tried .company-name.local)
SANCTUM_STATEFUL_DOMAINS=app.company-name.local:8080
I have added the appropriate middleware to the kernel:
'api' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
'throttle:api',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],
My cors.php file is updated with these details:
'paths' => [
'api/*',
'sanctum/csrf-cookie',
'/loginUser',
'/logout',
],
'supports_credentials' => true,
When the user hits that login endpoint they'll hit this particular route setup, which uses the web middleware:
Route::group([
'module' => 'Users',
'middleware' => ['web'],
], function () {
Route::post('/loginUser', 'UsersController#login');
});
It doesn't seem to matter what I change here, I still end up with the 419 so I'm missing something here. Can anyone shed any light on what the problem could be?