VueJS Vuelidate and deep nested Array/objects - vuelidate

Question

hope someone can help me I'm working on this since 2 days. I have the following Data in my component:
var types = [
{
**required**: true,
agreements: [
{ selected: true, desc: 'red' },
{ selected: false, desc: 'green'}
]
},
{
required: false,
agreements: [
{ selected: false, desc: 'red' },
{ selected: false, desc: 'green'}
]
},
];
I want to validate all the checkboxes (they have v-model on this selected attributes here!), to be checked, if the parent value required (see my data required!) is true. My Validations looks like this but I miss a last little bit of help to get this required value into my validator selected requiredIf function.
validations: {
types: {
$each: {
agreements: {
$each: {
selected: {
requiredIf: (value) => value === value.parent.required
}
}
}
}
}
}
Hope you understand me right. My Template looks like this:
<div class="mb-3" v-for="type in agreementTypes" :key="type.id">
<h3 class="text-primary">{{ type.displayName }}</h3>
<ul class="list-unstyled">
<li v-for="agreement in type.agreements" :key="agreement.id">
<p>{{ agreement.description }}</p>
<div class="mb-3 form-check form-switch">
<input
class="form-check-input"
type="checkbox"
role="switch"
:checked="agreement.active"
:id="agreement.id"
:required="agreement.required"
v-model="agreement.selected"
/>
<label class="form-check-label" for="agreements">{{ agreement.label }}<span v-if="agreement.required">**</span></label>
</div>
</li>
</ul>
</div>
Any Help will be apreshiated!
bye,
Marcel