form.vue

<template>
    <form class="needs-validation" novalidate="" @submit.prevent="submit">
        <div class="row g-3">
            <div class="col-sm-6">
                <label for="cnpj" class="form-label">CNPJ:</label>
                <input
                    type="text"
                    class="form-control"
                    id="cnpj"
                    placeholder=""
                    required=""
                    v-mask="'##.###.###/####-##'"
                    v-model="form.cnpj"
                    @input="$v.form.cnpj.$touch()"
                />
                <div class="invalid-feedback">CNPJ é obrigatório.</div>
                <div v-if="v$.form.cnpj.$error">CNPJ field has an error.</div>
            </div>
            <div class="col-sm-6">
                <label for="razao_social" class="form-label"
                    >Razão Social:</label
                >
                <input
                    type="text"
                    class="form-control"
                    id="razao_social"
                    placeholder=""
                    required=""
                    v-model="form.razao_social"
					@input="$v.form.razao_social.$touch()"
                />
                <div class="invalid-feedback">Razão Social é obrigatório.</div>
				<div v-if="v$.form.razao_social.$error">CNPJ field has an error.</div>
            </div>
		</div>
		<hr class="my-4" />
        <button class="w-100 btn btn-primary btn-lg" type="submit">
            Salvar
        </button>
	</form>
</template>
<script>
    import { useVuelidate } from "@vuelidate/core";
    import { required } from "@vuelidate/validators";
    
	export default {
        name: "Form",
        data() {
            return {
                form: {
                    cnpj: "",
                    razao_social: "",
                },
            };
        },
        setup: () => ({ v$: useVuelidate() }),
        validations() {
            return {
                form: {
                    cnpj: { required },
                    razao_social: { required },
                },
            };
        },
        methods: {
            submit() {
                this.$v.$touch();
                
				if (this.$v.$invalid) {
                    alert("ERROR");
                } else {
                    // Lógica de envio dos dados para uma API
                   alert("TUDO BELEZINHA");
                }
            },
        },
    };
</script>