Form Validation in Vue.js

<template>
  <form @submit.prevent="validateAndSubmit">
    <div>
      <input 
        v-model="form.email"
        @blur="validateEmail"
        :class="{ error: errors.email }"
      />
      <span v-if="errors.email">{{ errors.email }}</span>
    </div>
    
    <button :disabled="!isValid">Submit</button>
  </form>
</template>

<script setup>
import { reactive, computed } from 'vue'

const form = reactive({
  email: '',
  password: ''
})

const errors = reactive({
  email: '',
  password: ''
})

const isValid = computed(() => 
  !errors.email && !errors.password && 
  form.email && form.password
)

function validateEmail() {
  if (!form.email) {
    errors.email = 'Email is required'
  } else if (!/\S+@\S+\.\S+/.test(form.email)) {
    errors.email = 'Email is invalid'
  } else {
    errors.email = ''
  }
}
</script>