CKEditor 4.x component for Vue.js 2.x supporting moving in DOM

ckeditor-component.vue

Vue.component('html-editor', {
	template: '\
		<textarea rows="6" class="form-control htmleditor" v-bind:id="id" v-bind:name="name" v-bind:value="value"\
			v-bind:placeholder="placeholder" v-bind:readonly="readonly" v-bind:tabindex="tabindex">\
		</textarea>',
	props: ['id', 'name', 'value', 'placeholder', 'readonly', 'tabindex'],

	beforeDestroy: function() {
		if(this.instance) {
			this.instance.destroy();
			this.instance = null;
		}
	},

	data: function() {
		return {
			instance: null,
			text: ''
		};
	},

	methods: {
		change: function() {
			this.text = this.instance.getData();
			this.$emit('input', this.text);
		},
	},

	mounted: function() {
		this.instance = CKEDITOR.replace(this.id, {
			extraPlugins: 'divarea',
			initialData: this.value,
			readOnly: this.readonly,
			autoParagraph: false,
			entities: false
		});
		this.instance.on('change', this.change);
	},

	watch: {
		value: function(val, oldval) {
			if(val !== oldval && val !== this.text ) {
				this.instance.setData(val);
			}
		}
	}
});