Click Prevent on button until form is valid - vue.js

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