Form PasswordInput Component

<template>
   <div class="input-group">
      <input class="form-control"
        @input="handleInput"
        v-model="password"
        :type="showPassword ? 'text' : 'password'"
        v-bind:placeholder="placeholder" autocomplete="true"/>
      <div class="input-group-append">
          <div :class="{'cursor-pointer':showPointer}"
                @click="showPassword = !showPassword"
                @mouseout="showPointer = false"
                @mouseover="showPointer = true"
                class="input-group-text">
            <b-icon-eye v-if="! showPassword"/>
            <b-icon-eye-fill v-if="showPassword"/>
          </div>
      </div>
  </div>
</template>
<script>
import { BIconEye, BIconEyeFill } from 'bootstrap-vue'
export default {
  name: 'PasswordInput',
  props: {
    placeholder: String,
    value: String
  },
  data () {
    return {
      showPassword: false,
      showPointer: false,
      password: this.value
    }
  },
  components: {
    BIconEye,
    BIconEyeFill
  },
  methods: {
    handleInput (e) {
      this.$emit('input', this.password)
    }
  }
}
</script>