Password.vue

<template>
<div>

  <app-input
              :label="label"
              :type="type"
              prepend-content="lock"
              :append-content="passwordIcon"
              :append-inside="true"
              :append-pointer="true"
              @click-append="tooglePassword"
              :value="value"
              @input="inputEvent">
  </app-input>
</div>
</template>

<script>
import Input from './Input';

export default {
  name: 'Password',
  components: {
    appInput: Input,
  },
  props: {
    value: String,
    label: {
      type: String,
      default: 'Contraseña',
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    valid: {
      type: Boolean,
      default: null,
    },
  },
  data() {
    return {
      pass: '',
      type: 'password',
    };
  },
  computed: {
    passwordIcon() {
      return this.type === 'password' ? 'eye' : 'eye-slash';
    },
  },
  methods: {
    tooglePassword() {
      this.type = this.type === 'password' ? 'text' : 'password';
    },
    inputEvent(e) {
      this.$emit('input', e.target.value);
    },
  },
};
</script>