Проблемы обработки ошибок Laravel Jetsream Interia

Я просто катался на Jetstream / Interia и хотел оформить заказ. Итак, я создал форму с двумя полями ввода.

• Дата начала
• Дата окончания

У меня есть маршрут, который получает это по запросу GET и пытается его проверить. Вот так

web.php

Route::middleware(['auth:sanctum', 'verified'])->get('/asteroids', [\App\Http\Controllers\AsteroidController::class, 'index'])->name('asteroids.index');

Route::middleware(['auth:sanctum', 'verified'])->get('/asteroids/process', [\App\Http\Controllers\AsteroidController::class, 'process'])->name('asteroids.process');


<?php

namespace App\Http\Controllers;

use Inertia\Inertia;
use Illuminate\Http\Request;
use App\Http\Requests\AsteriodDateRequest;

class AsteroidController extends Controller
{
    public function index()
    {
        return Inertia::render('Asteroids/Index');
    }

    public function process(AsteriodDateRequest $request)
    {
        //
    }
}

AsteriodDateRequest
    public function rules()
    {
        return [
            'start_date' => ['required', 'date'],
            'end_date' => ['required', 'date'],
        ];
    }

Проблема, с которой я столкнулся, заключается в том, что я не могу отображать сообщения об ошибках проверки. Ниже мой код Vue Code

<jet-form-section @submitted = "submitDates">
    <template #title>
        Update Password
    </template>

    <template #description>
        Ensure your account is using a long, random password to stay secure.
    </template>

    <template #form>
        <div class = "col-span-6 sm:col-span-4">
            <jet-label for = "start_date" value = "Start Date" />
            <jet-input id = "start_date" type = "date" class = "mt-1 block w-full" v-model = "form.start_date" ref = "start_date" autocomplete = "start_date" />
            <jet-input-error :message = "form.errors.start_date" class = "mt-2" />
        </div>
        <div class = "col-span-6 sm:col-span-4">
            <jet-label for = "end_date" value = "End Date" />
            <jet-input id = "end_date" type = "date" class = "mt-1 block w-full" v-model = "form.end_date" ref = "end_date" autocomplete = "end_date" />
            <jet-input-error :message = "form.errors.end_date" class = "mt-2" />
        </div>


    </template>

    <template #actions>
        <jet-action-message :on = "form.recentlySuccessful" class = "mr-3">
            Saved.
        </jet-action-message>

        <jet-button :class = "{ 'opacity-25': form.processing }" :disabled = "form.processing">
            Save
        </jet-button>
    </template>
</jet-form-section>

<script>
import JetActionMessage from '@/Jetstream/ActionMessage'
import JetButton from '@/Jetstream/Button'
import JetFormSection from '@/Jetstream/FormSection'
import JetInput from '@/Jetstream/Input'
import JetInputError from '@/Jetstream/InputError'
import JetLabel from '@/Jetstream/Label'

export default {
    components: {
        JetActionMessage,
        JetButton,
        JetFormSection,
        JetInput,
        JetInputError,
        JetLabel,
    },

    data() {
        return {
            form: this.$inertia.form({
                start_date: '',
                end_date: '',
            }),
        }
    },
    methods: {
        submitDates() {
            this.form.get(route('asteroids.process'), {
                errorBag: 'submitDates',
                preserveScroll: true,
                onSuccess: () => this.form.reset(),
                
            })
        },
    },
}
</script>

here is the [![Screenshot][1]][1] of the response. Please let me know what I am doing wrong here.


  [1]: https://i.stack.imgur.com/diaf4.png