Click Prevent on button until form is valid

Question

I have a multi-step form. This is the first step in the form. Using Vee-Validate, I am trying to figure out how I would prevent the next button from being clickable before the form is valid. This is Fee-Validate 4 Vue 3

FORM:

<Form action="#" @submit="submit" method="POST" class="overflow-hidden space-y-6 pt-3">
    <div v-if="formStep == 1">
        <div>
            <div class="relative border border-gray-500 rounded-md px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-blue-600 focus-within:border-blue-600 ">
                <label for="name" value="Name" class="absolute -top-2 left-2 -mt-px inline-block px-1 bg-gray-900 text-sm font-medium text-gray-50">Username</label>
                <Field 
                    @keydown.space.prevent 
                    type="text" 
                    autocomplete="username" 
                    name="name" 
                    id="name" 
                    v-model="form.name" 
                    :rules="validateUsername" 
                    required 
                    autofocus 
                    class="bg-gray-900 text-white block w-full border-0 p-0 placeholder-gray-500 focus:ring-0 sm:text-sm" 
                    placeholder="" 
                />
            </div>
            <ErrorMessage name="name" class="text-red-500 mt-2" />
        </div>

        <div class="mt-6">
            <div class="relative border border-gray-500 rounded-md px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-blue-600 focus-within:border-blue-600">
                <label for="email" value="Email" class="absolute -top-2 left-2 -mt-px inline-block px-1 bg-gray-900 text-sm font-medium text-gray-50">Email Address</label>
                <Field 
                    id="email" 
                    name="email" 
                    type="email" 
                    autocomplete="email" 
                    v-model="form.email" 
                    :rules="validateEmail" 
                    required 
                    autofocus 
                    class="bg-gray-900 text-white block w-full border-0 p-0 placeholder-gray-500 focus:ring-0 sm:text-sm" 
                    placeholder="" 
                />
            </div>
            <ErrorMessage name="email" class="text-red-500 mt-2" />
        </div>

        <div class="mt-6">
            <div class="relative border border-gray-500 rounded-md px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-blue-600 focus-within:border-blue-600">
                <label for="password" value="Password" class="absolute -top-2 left-2 -mt-px inline-block px-1 bg-gray-900 text-sm font-medium text-gray-50">Password</label>
                <Field 
                    id="password" 
                    name="password" 
                    type="password" 
                    v-model="form.password" 
                    required 
                    autocomplete="new-password" 
                    :rules="validatePassword" 
                    validateOnInput 
                    class="bg-gray-900 text-white block w-full border-0 p-0 placeholder-gray-500 focus:ring-0 sm:text-sm" 
                    placeholder="" 
                />
            </div>
            <ErrorMessage name="password" class="text-red-500 mt-2" />
        </div>

        <div class="mt-6">
            <div class="relative border border-gray-500 rounded-md px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-blue-600 focus-within:border-blue-600">
                <label for="password_confirmation" value="Confirm Password" class="absolute -top-2 left-2 -mt-px inline-block px-1 bg-gray-900 text-sm font-medium text-gray-50">Confirm Password</label>
                <Field 
                    id="password_confirmation" 
                    name="password_confirmation" 
                    type="password" 
                    v-model="form.password_confirmation" 
                    required 
                    autocomplete="new-password" 
                    class="bg-gray-900 text-white block w-full border-0 p-0 placeholder-gray-500 focus:ring-0 sm:text-sm" 
                    placeholder="" 
                />
            </div>
            <div v-if="form.password != form.password_confirmation">
                <p class="text-sm text-red-500 mt-2">Passwords do not match</p>
            </div>
        </div>
    </div>

    <div>
        <div v-if="formStep == 1">
            <button type="button" @click="[nextStep(), locatorButtonPressed(), getStreetAddressFrom(this.form.user_latitude, this.form.user_longitude)] " class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">Next</button>
        </div>
</Form>

Where I am not sure is do I create a new method for this, or does vee-validate have some function I am not understanding within their documentation. Is there a reason to use Yup to make this work or am I just off the ball on this one altogether?

Also, Is there a way to make the button gray until the form is valid. I am using Tailwind 3