custom validation message in vee-validate

Question

I am using Laravel - 5.8 with Vue.js. My question is about how to show a custom error message for a rule in the Vee-Validate library. My custom message for the "required" rule is not showing, and instead it reads: "The first_name field is required." The expected message is "Please enter first name."

Below code is in app.js

import { ValidationProvider } from 'vee-validate/dist/vee-validate.full';

This is my HTML component code.

<template>    
    <div>
        <form role="form">
            <ValidationProvider name="first_name" :rules="required">
                <div slot-scope="{ errors }">
                    <input v-model="profileForm.first_name" class="form-control">
                    <p>{{ errors[0] }}</p>
                </div>
            </ValidationProvider>
                  
            <button type="button" @click="validateBeforeSubmit()">Update Profile</button>
        </form>
    </div>
</template>

Below is my JS script code

<script>
    import { localize } from 'vee-validate/dist/vee-validate.full';
    import en from "vee-validate/dist/locale/en.json";

    export default {
        data() {
            return {
                profileForm: {
                    first_name: ''
                },
                customMessages: {
                    en: {
                        custom: {
                            'first_name': {
                                required: 'Please enter first name'
                            }
                        }
                    }
                },
            }
        },
        created() {
            localize("en", this.customMessages);
        },
        methods: {
            validateBeforeSubmit() {
                this.$validator.validateAll();
            }
        }
    }
</script>

Am I missing anything?

Answer 1

custom keyword has been removed in version 3. It is now replaced with fields. Also this info was missing in docs

For more info please follow this issue link on github