PasswordInput.vue

<template>
  <div class="ui action input">
    <input
    required
    :tabindex="index"
    :type="passwordInputType"
    @input="$emit('input', $event.target.value)"
    :value="value">
    <span @click="showPassword = !showPassword" :title="labels.title" class="ui icon button">
      <i class="eye icon"></i>
    </span>
  </div>
</template>
<script>
export default {
  props: ['value', 'index'],
  data () {
    return {
      showPassword: false
    }
  },
  computed: {
    labels () {
      return {
        title: this.$gettext('Show/hide password')
      }
    },
    passwordInputType () {
      if (this.showPassword) {
        return 'text'
      }
      return 'password'
    }
  }
}
</script>