Vue

HTML

<div id="app">
  <h2>Toggle:</h2>
  <toggle-edit v-model="text" @change="save"></toggle-edit>
</div>

<script type="text/template" id="toggleEditTemplate">
  <div>
    <div v-if="active">
    	<input v-model="inputContent" type="text" />
  		<button @click="save" type="submit">Save</button>
    	<button @click="deactivate" type="cancel">Cancel</button>
    </div>
    <div v-if="!active">
      {{ modelValue }}
      <button @click="activate" type="button">edit</button>
    </div>
  </div>
</script>

Vue

const toggleEdit = {
  data() { return { active: false } },
  model: {
    prop: 'modelValue',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    modelValue: {
      default: ""
    }
  },
  template: toggleEditTemplate.innerHTML,
  methods: {
  	activate() {
    	this.inputContent = this.modelValue;
    	this.active = true;
    },
    deactivate() {
    	this.active = false;
    },
    save() {
    	this.$emit('change', this.inputContent);
      this.deactivate();
    }
  }
};

new Vue({
  el: "#app",
  components: {
    toggleEdit
  },
  data: {
    text: "Learn JavaScript"
  },
  methods: {
    save() {
      alert(`Saving: ${this.text}`);
    }
  }
})