Vuelidate-error-extractor nested objects validation - vue.js

Question

I have the following div in my vue file:
<div class="md-layout rate-row" v-for="(rate, index) in serviceDetails.serviceRates" :key="index">
<form-group
name="serviceDetails.serviceRates.$each.0.unitPriceExTax.$model"
label="Unit Price (Ex. Tax)"
attribute="Unit Price"
:messages="localMessages"
class="md-layout-item price"
>
<md-input v-model="rate.unitPriceExTax" />
</form-group>
<form-group
name="serviceDetails.serviceRates.$each.0.unitCostExTax.$model"
label="Unit Cost (Ex. Tax)"
attribute="Unit Cost"
:messages="localMessages"
class="md-layout-item cost"
>
<md-input v-model="rate.unitCostExTax" />
</form-group>
</div>
I also have the following prop inside my component (since as I understood I need an initial setup object):
props: {
serviceDetails: {
type: Object,
default: () => ({
serviceRates: [
{
unitPriceExTax: 0,
unitCostExTax: 0
}
]
})
},
...
...
}
I also have my validations which are like:
validations: {
serviceDetails: {
serviceRates: {
$each: {
unitPriceExTax: {
decimal,
minValue: (value) => !value || value > 0,
maxValue: (value) => !value || value < 100000000
},
unitCostExTax: {
decimal,
minValue: (value) => !value || value > 0,
maxValue: (value) => !value || value < 100000000
},
}
}
...
...
}
},
The localMessages in the data() section are:
data() {
return {
localMessages: {
required: '{attribute} is required.',
decimal: '{attribute} should contain a decimal number.',
minValue: '{attribute} should have a positive value.',
maxValue: '{attribute} should be less than 100000000.'
}
};
},
The form-group component source is the following:
<template>
<md-field :class="{ 'md-invalid': hasErrors }">
<label>{{ label }}</label>
<slot :touch="() => preferredValidator.$touch()" />
<span v-if="hasErrors" class="md-error">{{ firstErrorMessage }}</span>
</md-field>
</template>
<script>
import { singleErrorExtractorMixin } from 'vuelidate-error-extractor';
export default {
extends: singleErrorExtractorMixin
};
</script>
<style lang="scss" scoped>
.md-error {
bottom: -10px !important;
}
</style>
My problem is that I can not make vuelidate & the error extractor validate my properties.
I would expect an error message like:
In reality if I go to the Vue developer tools I can see that the validations occur correctly but I don't see the messages bellow the text fields.
I am almost persuaded that the issue is the wrong name attribute in the form-group but I don't know how to structure it. Also, how to put the index inside there?
For your information, the versions being used are:
"vuelidate": "^0.7.5",
"vuelidate-error-extractor": "^2.4.1",