minimal inline edit vue component

gistfile1.txt

<inline-edit :data="your.data" @update="vyour.data = $event" placeholder="Write data..."></inline-edit>

InlineEdit.vue

<template>
	<div class="editable" contenteditable="true" :placeholder="placeholder"  @input="update" @focusin="onFocus" @focusout="checkEmpty"></div>
</template>

<script>
    export default {
        name: "InlineEdit",
        props: {
            data: String,
			placeholder: {
                default: "write here...",
				type: String
			}
        },
        mounted: function () {
            this.$el.innerText = this.data;
        },
        watch: {
            data(newData, oldData) {
                if(document.activeElement !== this.$el) {
                    this.$el.innerText = newData;
                }
            }
        },
        methods: {
            update(event) {
                this.$emit('update', event.target.innerText);
            },
			onFocus(event){
                this.$emit('focus');
			},
			checkEmpty(event) {
                if (!this.$el.innerText.trim().length) {
                    this.$el.innerText = "";
                }
			}
        }
    }
</script>

<style scoped>
	.editable{
		min-height: 1em;
	}

	.editable[placeholder]:empty:before {
		content: attr(placeholder);
		opacity: .8;
	}

	.editable[placeholder]:empty:focus:before {
		content: "";
	}
</style>