Within my Vue3 Quasar application, I have implemented a component structure similar to the following:
<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 fails validation, it changes its color to red. However, in addition to this behavior, I also require the "myCustomLabel" div above the input to change to red when necessary. Is there a way for me to implement a function that triggers whenever the fields are validated or not based on rules, allowing me to make the desired color changes?