Reusable Input Field in vue.js

Reusable InputField Component

Create InputField component

<template>
    <input
        :placeholder="placeholder"
        :type="type"
        :required="required"
        :value="value"
        @input="$emit('update:value', $event.target.value)">
</template>

<script>
export default {
  props:{
    type: {
      type: String,
      default: 'text'
    },
    value: {
      type: String,
      required: true
    },
    placeholder: {
      type: String,
      default: ''
    },
    required: {
      type: Boolean,
      default: false
    }
  },
  name: "InputField"
}
</script>

Using Reusable InputField

<template>
    <InputField
        type="password"
        :value="value"
        :required="true"
        @update:value="(newValue) => (valye = newValue)"/>
</template>

<script>
    import InputField from "../../components/resusable/InputField.vue"
    export default {
      components:{
        InputField
      },
      data(){
        return {
          value: ""
        }
    },
}
</script>