如何使用Laravel和Vue.js验证recaptcha？

Question

RESOLVED : see changes in repository, in vue component, controller, new RUle Recaptcha, and blade file : https://github.com/IllichOulianov/m1_serveur_projet

I want to include a recaptcha in a comment form, using this package https://github.com/DanSnow/vue-recaptcha/ . It is correctly displayed under the input fields, the recaptcha behaves correctly when clicked, but I always get a 422 response in the console after verifying recaptcha and submitting :

POST http://localhost:8000/comments 422 (Unprocessable Entity) dispatchXhrRequest @ app.js:285 xhrAdapter @ app.js:119 dispatchRequest @ app.js:724 Promise.then (async) request @ app.js:531 Axios.(anonymous function) @ app.js:551 wrap @ app.js:984 submit @ app.js:1851 submit @ app.js:36913 invokeWithErrorHandling @ app.js:40775 invoker @ app.js:41100 original._wrapper @ app.js:46453

and this response in the devtools network tab :

{"message":"The given data was invalid.","errors":{"g-recaptcha-response": > ["The g-recaptcha-response field is required."]}}

I tried some things but none worked. I guess the trouble lies in the html element, the script fields and/or the validation rules. What do I need to add/modify ? My codes, and repository if needed : https://github.com/IllichOulianov/m1_serveur_projet CommentForm.vue :

<template>
    <div>
    <form @submit.prevent="submit">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Votre nom" name="name" id="name" v-model="fields.name" />
            <div v-if="errors && errors.name" class="text-danger">{{ errors.name[0] }}</div>
        </div>

        <div class="form-group">
            <input type="email" class="form-control" placeholder="Votre e-mail" name="email" id="email" v-model="fields.email" />
            <div v-if="errors && errors.email" class="text-danger">{{ errors.email[0] }}</div>
        </div>

        <div class="form-group">
            <textarea class="form-control" placeholder="Votre commentaire" id="content" name="content" rows="5" v-model="fields.content"></textarea>
            <div v-if="errors && errors.content" class="text-danger">{{ errors.content[0] }}</div>
        </div>
        <div class="form-group">
            <vue-recaptcha sitekey="XXXXX"></vue-recaptcha>
            <div v-if="errors && errors.recaptcha" class="text-danger">{{ errors.recaptcha[0] }}</div>
        </div>
        <button type="submit" class="btn btn-primary">Publier le commentaire (après modération)</button>
    </form>
    </div>
</template>

<script>
    import VueRecaptcha from 'vue-recaptcha';
    export default {
        components:{VueRecaptcha},
        data() {
            return {
                fields: {
                    name:'',
                    email:'',
                    content:'',
                    article_id:window.article_id,
                },
                errors: {},
            }
        },
        methods: {
            submit() {
                this.errors = {};
                axios.post('/comments', this.fields).then(response => {
                    alert('Message sent!');
                }).catch(error => {
                    if (error.response.status === 422) {
                        this.errors = error.response.data.errors || {};
                    }
                });
            },
        },

    }
</script>

COmmentCOntroller

public function store(Request $request,CommentsRepositoryInterface $interface) {
        $this->validate($request, [
            'name'=>'bail|required|min:3|alpha_num',
            'email'=>'bail|required|email',
            'content'=>'bail|required|between:3,5000',
            'g-recaptcha-response'=>'required|recaptcha'
        ]);
        $interface->save($request);
        return response()->json(null, 200);
    }

IN my blade file:

<script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>
    </script>
    <script type="text/javascript">article_id={{$article->id}};</script>
[...]
<div id="app">
        <comment-form></comment-form>
    </div>
    <script src={{asset("js/app.js")}}></script>

Thanks !