Creating an Input component using Vue and Tailwindcss

// TextInput.vue
<template>
    <div>
        <label
            v-if="label"
            class="form-label block mb-1 font-semibold text-gray-700"
            :for="id"
            >{{ label }}</label
        >
        <div class="relative">
            <input
                :id="id"
                ref="input"
                v-bind="$attrs"
                class="px-2 py-2 h-12 leading-normal block w-full text-gray-800 bg-white font-sans rounded-lg text-left appearance-none outline-none"
                :class="[
                    {
                        'border-red-400': errors.length,
                        'pl-12': withIcon === true
                    },
                    classes
                ]"
                :type="type"
                :value="value"
                @input="$emit('input', $event.target.value)"
                @keydown="$emit('keydown', $event)"
                @blur="$emit('blur', $event)"
                @keyup="$emit('keyup', $event)"
            />
            <div v-if="errors.length" class="text-red-600 mt-1 text-sm">
                {{ errors[0] }}
            </div>

            <svg
                class="absolute text-red-600 fill-current"
                style="top: 12px; right: 12px"
                v-if="errors.length"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
            >
                <path
                    d="M11.953,2C6.465,2,2,6.486,2,12s4.486,10,10,10s10-4.486,10-10S17.493,2,11.953,2z M13,17h-2v-2h2V17z M13,13h-2V7h2V13z"
                />
            </svg>

            <div
                class="absolute left-0 top-0 bottom-0 w-10 block ml-2"
                v-if="withIcon"
            >
                <slot name="icon"></slot>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TextInput',

    inheritAttrs: false,

    props: {
        id: {
            type: String,
            default() {
                return `text-input-${this._uid}`;
            }
        },
        type: {
            type: String,
            default: "text"
        },
        value: String,
        label: String,
        errors: {
            type: Array,
            default: () => []
        },
        withIcon: {
            type: Boolean,
            default: false
        },
        bordered: {
            type: Boolean,
            default: true
        }
    },

    methods: {
        focus() {
            this.$refs.input.focus();
        },
        select() {
            this.$refs.input.select();
        },
        setSelectionRange(start, end) {
            this.$refs.input.setSelectionRange(start, end);
        }
    },

    computed: {
        classes() {
            return {
                "border-2 focus:border-blue-600 focus:border-blue-600":
                    this.bordered === true,
                "border bg-gray-200 focus:bg-white": this.bordered === false
            };
        }
    }
};
</script>

<!-- ExampleComponent.vue -->
<template>
  <div class="max-w-lg mx-auto my-12">
    <!--        examples with lables -->
    <div
      class="border-l-4 border-blue-500 p-3 rounded mb-6 shadow bg-gray-100 font-semibold text-gray-600 tracking-wide text-lg"
    >
      Input components with labels
    </div>
    <text-input label="Email" class="mb-4"></text-input>
    <text-input label="Password" type="password" class="mb-4"></text-input>
    <!--        examples with label ended -->
    <!--        examples with icons -->
    <div
      class="border-l-4 border-blue-500 p-3 rounded my-10 mb-6 shadow bg-gray-100 font-semibold text-gray-600 tracking-wide text-lg"
    >
      Input components with Icons
    </div>

    <text-input class="mb-4" with-icon placeholder="Enter your email...">
      <template #icon>
        <svg
          class="mt-2 w-8 h-8 stroke-current text-gray-100"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          stroke="currentColor"
        >
          <path
            d="M3 8L10.8906 13.2604C11.5624 13.7083 12.4376 13.7083 13.1094 13.2604L21 8M5 19H19C20.1046 19 21 18.1046 21 17V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7V17C3 18.1046 3.89543 19 5 19Z"
            stroke="#4A5568"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </template>
    </text-input>
    <text-input
      class="mb-4"
      type="password"
      with-icon
      placeholder="Enter your password..."
    >
      <template #icon>
        <svg
          class="mt-2 w-8 h-8 stroke-current text-gray-100"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          stroke="currentColor"
        >
          <path
            d="M12 15V17M6 21H18C19.1046 21 20 20.1046 20 19V13C20 11.8954 19.1046 11 18 11H6C4.89543 11 4 11.8954 4 13V19C4 20.1046 4.89543 21 6 21ZM16 11V7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7V11H16Z"
            stroke="#4A5568"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </template>
    </text-input>
    <!--        examples with icons ended -->

    <!--        examples with error messages -->
    <div
      class="border-l-4 border-red-500 p-3 rounded mb-6 mt-10 shadow bg-gray-100 font-semibold text-gray-600 tracking-wide text-lg"
    >
      Input components with Error Messages
    </div>
    <text-input
      label="Email"
      class="mb-4"
      :errors="errors['errorEmail']"
      @keydown="delete errors['errorEmail']"
    >
    </text-input>
    <text-input
      label="Password"
      type="password"
      class="mb-4"
      :errors="errors['errorPassword']"
      @keydown="delete errors['errorPassword']"
    ></text-input>
    <!--        examples with error messages ended -->
  </div>
</template>

<script>
import TextInput from "@/Shared/TextInput";

export default {
  components: {
    TextInput
  },
  data() {
    return {
      errorEmail: "",
      errors: {
        errorEmail: ["The email field is required."],
        errorPassword: ["The password confirmation does not match."]
      }
    };
  }
};
</script>