JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.min.css">
<div id="app">
  <h1>Vue Password Input</h1>
  <ui-password-input></ui-password-input>
</div>

<template id="ui-password-input">
  <div class="ui-password-input-wrapper">
    <input :type="type" class="ui-password-input" v-model="password">
    <button @click="isPlain = !isPlain" class="ui-password-toggle">
      <i class="octicon octicon-eye"></i>
    </button>
  </div>
</template>

CSS

@import url('https://fonts.googleapis.com/css?family=Lato');

* {
  font-family: 'Lato', sans-serif;
}

.ui-password-input-wrapper {
  position: relative;
  display: inline-block;
}

.ui-password-input {
  padding: 5px 10px;
  padding-right: 35px;
  font-size: 20px;
}

.ui-password-toggle {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  background-color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  color: #7f8c8d;
}

.ui-password-toggle:hover {
  color: #2c3e50;
}

JavaScript

const PasswordInput = {
  template: '#ui-password-input',
  data: function() {
    return {
      password: 'Hello World',
      isPlain: false
    }
  },
  computed: {
    type: function() {
      return this.isPlain ? 'text' : 'password'
    }
  }
}

new Vue({
  el: '#app',
  components: {
    'ui-password-input': PasswordInput
  }
})