Vue reCaptcha component

VueRecaptcha.vue

<template>
    <div
        ref="recaptcha"
        :data-sitekey="$recaptcha.siteKey"
        :data-theme="theme"
        :data-size="size"
    ></div>
</template>

<script>
export default {
    model: {
        event: 'input',
        prop: 'value',
    },
    
    data () {
        return {
            widgetId: null,
            isVerified: false,
        };
    },

    props: {
        value: {
            type: String,
        },
        theme: {
            type: String,
            default: 'light',
        },
        size: {
            type: String,
            default: 'normal',
        },
    },

    mounted () {
        this.$nextTick(() => {
            this.$recaptcha.load().then((recaptcha) => {
                this.widgetId = recaptcha.render(this.$refs.recaptcha, {
                    callback: this.onSuccess,
                    expiredCallback: this.onExpire,
                    errorCallback: this.onError,
                });
            });
        });
    },

    methods: {
        onSuccess (response) {
            this.$emit('input', response);
        },

        onExpire () {
            this.$emit('expire');

            this.reset();
        },

        onError (error) {
            this.$emit('error', error);

            this.reset();
        },

        /**
         * Reset ReCaptcha programmatically
         *
         * @public
         */
        reset () {
            this.$emit('reset');
            
            this.$emit('input', undefined);

            this.$recaptcha.load().then((recaptcha) => {
                recaptcha.reset(this.widgetId);
            });
        },
    },
};
</script>