shipping-portal/resources/assets/vue/components/general/elements/ValidationErrorComponent.vue

<template>
    <div v-if="validator.$error" class="text-danger">
        <small class="bold" v-for="(object, param) in validator.$params">
            <span v-if="object.type === 'minLength'">{{object.min}} characters</span>
            <span v-if="object.type === 'minValue'">{{object.min}}</span>
            <span v-if="object.type === 'sameAs'">{{object.eq}} field</span>
            <span v-if="object.type === 'numeric'">this field only accepts numbers</span>
        </small>
    </div>
</template>

<script>
    export default {
        props: {
            validator: {
                required: true
            }
        },
        data(){
            return {
                errorMessages:{
                    required: 'this field is required',
                    email: 'enter a valid email address',
                    minLength: 'this field must have at least',
                    sameAs: 'this field must match the',
                    minValue: 'this field must at least be',
                    numeric: 'this field only accepts numbers',
                },
            }
        },
        computed: {
            Validation(){
                return this.validator;
            }
        }
    }
</script>