Vue 3 checkbox component does not work in laravel as checkbox (Accept terms) situation

Question

I'm working on a laravel 9 project that uses vue 3. For each form input has been made field components.Everything works fine except registration checkbox (Accept terms). If the checkbox is used normally in vue, it works fine. as soon as a component is made of it, it no longer works. By clicking the chackbox on and off I get the message that the accept terms is required!

I hope you can help me with this

-Vue Registration Form componetnt

<template>
    <form class="text-left" method="post" @submit.prevent="submit()">
        <div class="alert alert-success mb-1" v-if="success" v-html="successMessage"></div>
        <div class="alert alert-danger mb-1" v-if="errors.message" v-html="errors.message"></div>

        <InputFieldWithoutIcon ref="email" type="email" name="email" label="E-mail" :errors="errors" @update:field="fields.email=$event"/>
        <InputFieldWithoutIcon ref="password" type="password" name="password" label="Password" :errors="errors" @update:field="fields.password=$event"/>
        <InputFieldWithoutIcon ref="password_confirmation" type="password" name="password_confirmation" label="Password Confirmation" :errors="errors" @update:field="fields.password_confirmation=$event"/>
        <Checkbox :text="newsletter_text" name="newsletter" type="checkbox" :errors="errors" @update:field="fields.newsletter=$event"/>
        <Checkbox :text="policy_text" name="policy_accepted" type="checkbox" :errors="errors" @update:field="fields.policy_accepted=$event"/>
        
        <SubmitButtonWithoutIcon name="create account" type="submit" custom_btn_class="btn-block btn-primary" custom_div_class=""/>
    </form>
</template>

<script>
import InputFieldWithoutIcon from "../components/InputFieldWithoutIcon";
import SubmitButtonWithoutIcon from "../components/SubmitButtonWithoutIcon";
import Checkbox from "../components/Checkbox";

export default {
    name: "RegistrationUser",
    components: {
        InputFieldWithoutIcon,
        SubmitButtonWithoutIcon,
        Checkbox
    },
    data() {
        return {
            fields: {
                email: '',
                password: '',
                password_confirmation: '',
                policy_accepted: '',
                newsletter: '',
            },
            errors: {},
            success: false,
            successMessage: '',
            newsletter_text: 'I want to receive newsletters',
            policy_text: 'I accept <a class="text-bold text-underline" href="" target="_blank" title="privacy policy">the policy</a>',
        }
    },
    methods: {
        submit() {
            axios.post('/api/registration', this.fields)
                .then(response => {
                    if (response.status === 200) {

                        this.$refs.email.value = null;
                        this.$refs.password.value = null;
                        this.$refs.password_confirmation.value = null;

                        this.fields = {
                            email: '',
                            password: '',
                            password_confirmation: '',
                            policy_accepted: '',
                            newsletter: '',
                        };

                        this.errors = {};
                        this.success = true;
                        this.successMessage = response.data.message;
                    }
                }).catch(errors => {
                if (errors.response.status === 422 || errors.response.status === 401) {
                    this.errors = errors.response.data.errors;
                }
            });
        }
    }
}
</script>

-Vue Checkbox component

<template>
    <div class="custom-control custom-checkbox">
        <input class="custom-control-input"
               :id="name"
               :name="name"
               :type="type"
               v-model="value"
               @input="updateField()"
        >
        <label class="custom-control-label" :for="name">
            {{ text }}
        </label>
        <div class="invalid-feedback" v-text="errorMessage()"></div>
    </div>
</template>

<script>
export default {
    name: "Checkbox",
    props: [
        'name',
        'type',
        'text',
        'errors'
    ],
    data: function () {
        return {
            value: false
        }
    },
    computed: {
        hasError: function () {
            return this.errors && this.errors[this.name] && this.errors[this.name].length > 0;
        }
    },
    methods: {
        updateField: function () {
            this.clearErrors(this.name);
            this.$emit('update:field', this.value)
        },
        errorMessage: function () {
            if (this.errors && this.errors[this.name]) {
                return this.errors[this.name][0];
            }
        },
        clearErrors: function () {
            if (this.hasError) {
                this.errors[this.name] = null;
            }
        }
    }
}
</script>

-Laravel Registration request

public function rules(): array
    {
        return [
            'email' => 'required|email|unique:users',
            'password' => 'required|confirmed|min:8',
            'newsletter' => 'nullable|boolean',
            'policy_accepted' => 'accepted'
        ];
    }

Answer 1

I've found the solution. In the checkbox template instead of using @input="updateField()" I replaced that with @change="updateField()" That's all!