Как проверить несколько элементов формы в Vue компоненте?

У меня есть приложение Vue, в виде формы с несколькими правилами включения и выключения в зависимости от сделанного выбора. Я сделал это, создав компоненты в разделах. Прежде чем будет активна кнопка «Submit», должна быть проверка, все ли заполнено. Есть класс, который обновляется, когда элемент заполнен. Нужно заполнить класс, пока некоторые данные не будут помещены в поле или компонент.

<template>
  <div>
  <div>
        <label class="block">
          <span :class="[Boolean(loadFormDate) ? 'bg-blue-lighter': 'need-to-fill']"><strong>Date:</strong></span>
          <datepicker
            placeholder="Select Date"
            @selected="commitDate('formDate', $event)"
            :value="loadFormDate" />
        </label>
      </div>
      <div class="flex-1">
        <label class="block">
          <span  :class="[Boolean(staffID) ? 'bg-blue-lighter': 'need-to-fill','w-full']"><strong>Staff ID:</strong></span>
          <input class="block" placeholder="Staff ID"
                 @input="commitField('staffID', $event.target.value)"
                 :value="staffID"
          />
        </label>
      </div>
  </div>
</template>

Должен быть поиск по всем элементам, чтобы увидеть, что «необходимо заполнить» не существует ни в одном элементе формы на предмет заполненных полей, и только после этого акоивировать кнопку.