Проверка обязательных полей

Всем привет. Подскажите как сдлеать валидацию на пустые строки (ввод обязательных полей) так, чтобы при запуске страницы это пустое поле не ругалось, на то, что оно пустое.

Т.е. чтобы стили связанные с ошибкой ввода проявлялись после взаимодействия с input или при отправке форму, а не сразу после того как загрузился компонент

Как пример, один из моих инпутов:

 <q-input
          :disable="noRequestsReceived"
          placeholder="Введите фамилию, имя и отчество"
          maxlength="256"
          class="full-width form-input"
          @keypress="checkNum($event)"
          style="max-width: 600px !important"
          v-model="data.name"
          :class="{'error-input':checkName}"
          @update:model-value="checkName"
        />
function checkNum (e: { keyCode: number; preventDefault: () => void }) {
  const char = String.fromCharCode(e.keyCode)
  if (/^[^0-9]+$/.test(char)) return true
  else e.preventDefault()
}
 const checkName = computed(() => {
  return !data.name.trim()
})