JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <div>
    First Name:
    <input type="text" v-model="user.firstName" :disabled="!isEditing"
           :class="{view: !isEditing}">
  </div><div>
    Last Name:
    <input type="text" v-model="user.lastName" :disabled="!isEditing"
           :class="{view: !isEditing}">  
           <input type="date" v-model="edate" :disabled="!isEditing"
           :class="{view: !isEditing}"
  </div>
  <button @click="isEditing = !isEditing">
    {{ isEditing ? 'Save' : 'Edit' }}
  </button>
  <button v-if="isEditing" @click="isEditing = false">Cancel</button>
</div>

CSS

.view {
  border-color: transparent;
  background-color: initial;
  color: initial
}

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    isEditing: false,
    user: {
      firstName: 'John',
      lastName: 'Smith'
    }
  }
})