How to throw v-model in a component?

Question

Vue.js

There is an input component, it turned out to throw v-model into it, but when the v-model itself changes, the value of the input is not reset. As a selat so that after cleaning the model, the value would also change

<template lang='pug'>
     div(:class="[ active ? 'form-group form-group_valid' : 'form-group' ]")
        label.form-group__label(:for='name') {{ label }}
        input.form-group__field(:type='type' :id='name' :name='name' autocomplete='off' ref='field' @focus='onFocus()' @blur='onBlur()' @input='onInput()')
</template>

<script>
    export default {
        name: 'Field',
        data() {
            return {
                active: false
            }
        },
        props: {
            type: {
                type: String,
                required: true
            },
            name: {
                type: String,
                required: true
            },
            label: {
                type: String,
                required: true
            }
        },
        methods: {
            onFocus() {
                this.active = true;
            },

            onBlur() {
                this.$refs.field.value ? this.active = true : this.active = false
            },

            onInput(value) {
                this.$emit('input', event.target.value)
            },
        }
    }
</script>

Here on the form submission after the dispatch I try to clear the fields

<template lang='pug'>
    form.form.form_singup(@submit.prevent='onSingup()')
            h2.heading-b2b.heading-b2b_form Я - новый партнер
                                            
            field(type='email' name='userEmailSingup' label='E-mail*' class='mb-4' v-model='email')

            field(type='password' name='userPasswordSingup' label='Пароль*' class='mb-5' v-model='password')
                                
                                
            div.d-flex.justify-content-center
                 button.button.button_primary.button_lg(type='submit') Отправить заявку

<template>

onSingup() {
                this.$store.dispatch('singUp', {
                    email: this.email,
                    password: this.password
                })

                this.email = "";
                this.password = "";
            },

Answer 1

You need to add the value input parameter to the component, v-model uses it to set the value:

props: {
         // ...
            value: {
                type: String,
                required: true
           }
}

input.form-group__field(:type='type' :id='name' :name='name' autocomplete='off' ref='field' @focus='onFocus()' @blur='onBlur()' @input='onInput()' :value="value")