Resource URI is recognised but page wont load and browser throws 404, route:list says the route exist

Question

I'm using Inertia to build a Laravel Vue app with Laravel 11 and Vue 3. The issue I'm facing involves a controller called ListingController that is resourceful. I created it using the command php artisan make:model Listing -mrc, which automatically creates a controller, model, and migration. All the pages were loading fine until I added an auth middleware in my web.php.

use App\Http\Controllers\AuthController;
use App\Http\Controllers\UserController;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PagesController;
use App\Http\Controllers\ListingController;

Route::get('/', [PagesController::class, 'home'])->name('home');

Route::get('login', [AuthController::class, 'create'])->name('login');
Route::post('login', [AuthController::class, 'store'])->name('login.store');
Route::delete('logout', [AuthController::class, 'destroy'])->name('logout');
// Allow access to listings.index and listings.show without authentication
// Route::get('listings', [ListingController::class, 'index'])->name('listings.index');
// Route::get('listings/{id}', [ListingController::class, 'show'])->name('listings.show');
route::get('register', [UserController::class, 'create'])->name('register');
route::post('register', [UserController::class, 'store'])->name('register.store');

Route::resource("listings", ListingController::class)->only(['index', 'show']);
Route::middleware('auth')->group(function () {
    Route::resource("listings", ListingController::class)->only(['destroy', 'edit', 'store', 'update', 'create']);
});

I can access /listings/edit and send requests via other methods such as destroy, store, and update. However, the page for /listings/create will not load, and the browser throws a 404 not found error. I have even run php artisan route:list to ensure it exists.

GET|HEAD        / .................................................................. home › PagesController@home
  POST            _ignition/execute-solution ignition.executeSolution › Spatie\LaravelIgnition › ExecuteSolutionC…
  GET|HEAD        _ignition/health-check ... ignition.healthCheck › Spatie\LaravelIgnition › HealthCheckController
  POST            _ignition/update-config ignition.updateConfig › Spatie\LaravelIgnition › UpdateConfigController
  GET|HEAD        listings .............................................. listings.index › ListingController@index
  POST            listings .............................................. listings.store › ListingController@store
  GET|HEAD        listings/create ..................................... listings.create › ListingController@create
  GET|HEAD        listings/{listing} ...................................... listings.show › ListingController@show
  PUT|PATCH       listings/{listing} .................................. listings.update › ListingController@update
  DELETE          listings/{listing} ................................ listings.destroy › ListingController@destroy
  GET|HEAD        listings/{listing}/edit ................................. listings.edit › ListingController@edit
  GET|HEAD        login ............................................................ login › AuthController@create
  POST            login ....................................................... login.store › AuthController@store
  DELETE          logout ......................................................... logout › AuthController@destroy
  GET|HEAD        register ...................................................... register › UserController@create
  POST            register ................................................. register.store › UserController@store
  GET|HEAD        up ................................................................. generated::LiOjdZsBMrWYI3QG

This is the screen shot of my browser when i try to access /listings/create

However, when I change the order in which the routes are defined in my web.php, I am able to access /listings/create. By changing the order, I mean like this:

use App\Http\Controllers\AuthController;
use App\Http\Controllers\UserController;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PagesController;
use App\Http\Controllers\ListingController;

Route::get('/', [PagesController::class, 'home'])->name('home');

Route::get('login', [AuthController::class, 'create'])->name('login');
Route::post('login', [AuthController::class, 'store'])->name('login.store');
Route::delete('logout', [AuthController::class, 'destroy'])->name('logout');
// Allow access to listings.index and listings.show without authentication
// Route::get('listings', [ListingController::class, 'index'])->name('listings.index');
// Route::get('listings/{id}', [ListingController::class, 'show'])->name('listings.show');
route::get('register', [UserController::class, 'create'])->name('register');
route::post('register', [UserController::class, 'store'])->name('register.store');

Route::middleware('auth')->group(function () {
    Route::resource("listings", ListingController::class)->only(['destroy', 'edit', 'store', 'update', 'create']);
});
Route::resource("listings", ListingController::class)->only(['index', 'show']);

When I attempt to access in both scenarios, I am authenticated.

I will provide any other information required to debug this issue. I have read through the documentation and found no mention that the order of routes matters.

Other solutions I have tried include:

1. Creating another route to serve the same page via a different method defined in the controller. This approach works.

Route::middleware('auth')->group(function () {
    Route::get('listings.create', [ListingController::class, 'create2'])->name('listings.create2');
});

2. However if i were to use listings/make instead , the browser throws the same 404 error.

Route::middleware('auth')->group(function () {
    Route::get('listings/create', [ListingController::class, 'create2'])->name('listings.create2');
});

3. I have also tried running php artisan route:clear and php artisan optimize, still got the same 404 error.

I'm currently using php artisan serve for my application.