Vue.jsでユーザープロフィール編集ページの作り方

Vue.js、Vuetify、firebaseを使いwebアプリを作成しております。
ユーザーが自分のプロフィールを編集するページを作っているのですが、行き詰ってしまいました。

「プロフィールを編集」ボタンを押したら入力フォームを表示し編集できるようにし、その際に「更新」ボタンを押したらデータを更新、「キャンセル」ボタンを押したら入力した内容を破棄して戻るようにしたいです。
1回目はキャンセルボタンがきちんと動作するのですが2回目以降はキャンセルが効かずに変更されてしまいます。

まだVueを勉強し始めたばかりなので至らぬ点が多いかとお思いますが、どこをどう直したら良いかご教授いただけると幸いです。宜しくお願い致します。

<template>
  <div>
    <v-btn flat outline v-if="!isEdit" @click="edit" class="ml-4">プロフィールを編集</v-btn>
    <v-btn flat outline v-if="isEdit" @click="update" v-bind:disabled="noChange" class="red red--text ml-4">更新</v-btn>
    <v-btn flat outline v-if="isEdit" @click="cancel">キャンセル</v-btn>
    <v-layout align-center>
      <v-flex xs3><v-subheader>名前</v-subheader></v-flex>
      <v-flex xs9 v-if="!isEdit">{{currentUser.onamae}}</v-flex>
      <v-flex xs9 v-if="isEdit">
       <v-text-field v-model="currentUser.onamae"></v-text-field>
      </v-flex>
    </v-layout>
  </div>
</template>

<script>
import firebase from 'firebase'
import db from '@/fb'

export default {

  data(){
    return{
      isEdit: false,
      updated: false,
    }
  },

  methods: {
    edit(){
      this.isEdit = true;
      this.updated = false;
    },

    update(){
      this.newUserData = {
        onamae: this.currentUser.onamae,
      };

      this.currentUserEmail = firebase.auth().currentUser.email;  //ログイン中ユーザのメールアドレスを取得
      var currentUserDoc = db.collection('users').doc(this.currentUserEmail);  //ログイン中ユーザーのドキュメントを代入
      currentUserDoc.update(this.newUserData)
      .then(function(docRef) {
          console.log("Document written with ID: ", docRef);
          location.reload();  //ページをリロード
      })
      .catch(function(error) {
          console.error("Error adding document: ", error);
      });
    },

    cancel(){
      this.isEdit = false;
      this.$store.commit('setUser', this.oldUserData);
    },
  },

  computed: {

    changes: function() {
      const changes = [];
      const orig = this.oldUserData;
      const dest = this.currentUser;
      Object.keys(orig).forEach(function(key) {
        if (orig[key] != dest[key]) {
          changes.push({name: key});
        }
      });
      return changes;
    },

    noChange: function() {
    // 何か情報がオリジナルと変わったときだけ、更新ボタンをアクティブにする。
      return !(this.isEdit && this.changes.length > 0);
    },

    currentUser: function(){
      return this.$store.getters.currentUser;
    },

    oldUserData(){
      return this.$store.getters.oldUserData;
    },
  }
}