I have seen several posted questions with similar titles. For example, Vuetify apply rules validation to a custom component. However, they either (like that one) reference a situation where the rules can just be passed to a single internal form field component, or don’t have an answer at all. To the communities defense, the questions that are closer to mine are typically poorly posed or unnecessarily complicated. So, I will try to pose a clear simple case that demonstrates my issue, in hopes that there is a simple answer.

Say I want to create a custom component <MyTextArea> that contains two fields, and I have validation rules that depend upon both of those fields. For example, I might want to be able to specify a rule that requires one and only one of the fields to be non-empty.

From what I have been able to find, I expect I would need to create a MyTextArea.vue file that looks something like

<script setup>
const model = defineModel()
const props = defineProps({
    rules: {
        type: Array,
        required: false
    }
}
</script>
<template>
<v-textarea label="field a" v-model="model.a"></v-textarea><br/>
<v-textarea label="field b" v-model="model.b"></v-textarea>
</template>

And where when I am using the component I want to be able to write

<v-form>
    ...
    <MyTextArea v-model="my_model" :rules="[value => !!value.a != !!value.b]" />
    ...
</v-form>

Since I can’t just pass the specified rules on, I would expect that I need to implement a function in MyTextArea.vue that runs the rules, and returns the result, but I haven’t found an example or any documentation on how to do this.

Any answers, including “hey bozo its right here at https:…”, would be very welcome.

Thanks