Vuelidate-error-extractor nested objects validation

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",