Simple Vue password input component.

PasswordInput.vue

<template>
    <div class="input-group password-input">
        <input type="hidden" :name="name" v-model="password" />
        <input type="password" class="form-control" v-model="password" v-if="!visible" />
        <input type="text" class="form-control" v-model="password" v-else />

        <div class="input-group-append">
            <button class="btn btn-outline-dark" type="button" @click.prevent="toggleVisibility">
                <i class="material-icons">
                    <template v-if="visible">visibility</template>
                    <template v-else>visibility_off</template>
                </i>
            </button>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            name: String,
            value: String,
        },
        data () {
            return {
                visible: false,
                password: this.value,
            }
        },
        watch: {
            password () {
                this.$emit('input', this.password);
            }
        },
        methods: {
            toggleVisibility () {
                this.visible = !this.visible;
            }
        }
    }
</script>

<style scoped>

</style>