Listen to input validation events on Quasar

In my Vue3 Quasar project, I have a component similar to this:

<template>
  <div class="q-pa-md">
    <div id="myCustomLabel">{{ props.label }}</div>
    <q-input
      ref="myInput"
      filled
      v-model="name"
      :rules="props.rules"
    />
  </div>
</template>

Whenever a field is not valid it changes its color to red. However, I also need to change the "myCustomLabel" div above the input to red. Is there any way to trigger a function whenever the fields are validated or not through rules so I can also change it?

This works well in the case of typing more than 3 chars, we have the custom label with a negative background but anything else is also available given the isValid external validation.

<div id="q-app" style="min-height: 100vh;">
<div class="q-pa-md" style="max-width: 300px">
    <p :class="!isValid && 'bg-negative'">Custom label</p>
    <q-input
      filled
      v-model="model"
      label="Type here"
      bottom-slots
      hint="Max 3 characters"
      error-message="Please use maximum 3 characters"
      :error="!isValid"
    ></q-input>
  </div>
</div>

const { ref, computed } = Vue
const app = Vue.createApp({
  setup () {
    const model = ref('')

    return {
      model,
      isValid: computed(() => model.value.length <= 3)
    }
  }
})

app.use(Quasar, { config: {} })
app.mount('#q-app')

Here is a codepen with a visual reproduction, this was taken from this part of the docs (external validation).