NDynamicTags Validation

[DiracSpace]

Hi guys, I have a really weird use case for the dynamic tags component. I'm trying to input a list of years and apply validation but for some reason it's applying the validation when a year is inputted saying there isn't any year. I'm hoping someone can help me out. Right now I've changed it to use the ref instead of computed property since I thought it would work better according to the documentation but it seems to not work.

<script setup lang="ts">
import type Wrapper from '~/shared/components/form/Wrapper.vue'

const props = withDefaults(defineProps<{
  schoolYears: number[]
  schoolYearsReadonly?: boolean
}>(), {
  ...
})

const emit = defineEmits<{
  (e: 'update:schoolYears', value: number[])
  (e: 'success')
  (e: 'test')
}>()

const schoolYears = computed<string[]>({
  get: () => props.schoolYears.map(String),
  set: (value: string[]) => emit('update:schoolYears', value.map(Number)),
})

const inputYears = ref<string[]>([])

const formRules = withRuleTriggers({
  schoolYears: {
    required: true,
    key: 'schoolYears',
    trigger: ['change'],
    message: 'At least one School Year is required',
    validator: (_, value: string[]) => {
      console.log('value:', value)
      if (value.length > 1) {
        return new Error('At least one School Year is required')
      }

      return true
    },
  },
})

const formRef = ref<InstanceType<typeof Wrapper>>()

const formModel = ref({
  inputYears,
})

defineExpose({ submit })

function submit() {
  formRef.value?.submit()
}

onMounted(() => {
  inputYears.value = props.schoolYears?.map(String) ?? []
})

function handleUpdate(newYears: string[]) {
  const mappedInputYears = newYears.map(Number)
  emit('update:schoolYears', mappedInputYears)
}
</script>

<template>
  <EgLoading :show="props.isTestingConnection">
    <FormWrapper
      ref="formRef"
      :model="formModel"
      :rules="formRules"
      @success="emit('success')">
      <div class="container my-5">
        <NAlert
          v-if="props.schoolYearsReadonly"
          class="mb-5"
          type="warning">
          School years may not be changed once an record is created.
        </NAlert>
        <NDynamicTags
          v-model:value="inputYears"
          label="School Year(s)"
          name="schoolYears"
          :readonly="props.schoolYearsReadonly"
          :disabled="props.schoolYearsReadonly"
          @update:value="handleUpdate" />
      </div>
    </FormWrapper>
  </EgLoading>
</template>

CodeSandbox -> https://codesandbox.io/s/smoosh-breeze-ll2sqq