<template>
  <form @submit="submitForm">
    <input v-model="name" :class="{ 'is-invalid': !isNameValid }" type="text" placeholder="Name" required>
    <input v-model="email" :class="{ 'is-invalid': !isEmailValid }" type="email" placeholder="Email" required>
    <button type="submit" :disabled="!isFormValid">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: ''
    };
  },
  computed: {
    isNameValid() {
      return this.name.length > 0;
    },
    isEmailValid() {
      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.email);
    },
    isFormValid() {
      return this.isNameValid && this.isEmailValid;
    }
  },
  methods: {
    submitForm() {
      // Submit form logic
    }
  }
};
</script>