Vue3 / div 엘리먼트에서 contenteditable 을 반응형으로

Vue3 Composition API 기준으로 작성했다.

어쨌든 잘못된 기획으로 인하여 불필요한 코드를 작성했지만, 메모해둘 필요는 있는 듯 하여 포스팅을 한다.
특별한 건 없다. 코드 작성구조 및 방식만 메모해두는 거니

HTML (Template)

<template>
	<div contenteditable="true" v-html="editData.edit" @input="updateStyling($event.target)"></div>
</template>

Javascript (Vue.js 3 / Composition API)

const editData = reactive({
	origin: '',
	edit: ''
});
const updateStyling = (eventTarget) => {
	editData.edit = eventTarget.innerHTML.toString();
};

@input 이벤트에서 target 까지만 함수 파라미터로 넘겨주어야 innerHTML 속성에 접근할 수 있다.