Почему не работает v-model для компонента на странице?

У меня есть компонент инпут, использую его на своей странице. Мне необходимо чтобы значение его value связывалось с пропсом email на моей странице, но почему-то не работает. Значение как было пустым по умолчанию, так и остается. Вот код инпута:

                <my-input :placeholder="phEmail" v-model="email"></my-input>
            <my-btn class="loginBtn" :text="text" @click="sendData"></my-btn>
</template>

<script>
    import MyBtn from '@/components/UI/MyButton.vue';
    import MyInput from '@/components/UI/MyInput.vue';
    export default {
        components: {MyBtn,, MyInput},
        data() {
            return {
                phEmail: 'Введите адрес эл. почты',
                email: '',
            }
        },
        methods: {
            sendData() {
                console.log("Email value on sendData:", this.email);
                console.log(this.email);
                // if (this.email.length > 0 && this.email.length <= 100) {
                //     this.email = '';
                // }   else {
                //     this.email = '';
                //     this.phEmail = 'недопустимая длина';
                // }
            }
        }
    }
</script>```

вот код компонента инпут:

<template>
    <input class="inputBlock" @input="updateValue" :placeholder="placeholder">
</template>
<script>
    export default {
        props: {
            placeholder: {
                type: String,
                required: false,
                default: '',
            },
        },
        methods: {
            updateValue(event) {
                console.log("Emitting input event with value:", event.target.value);
                this.$emit('input', event.target.value);
            }
        }
    }
</script>