Vue Js make text editable on click

<!DOCTYPE html>
<html>
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
	<h3>Vue Js make text editable on click</h3>
	<div id="app">
		<h1 ref="heading" contenteditable v-html="content.heading" @input="updateHeading"></h1>
		<h2 ref="subheading" contenteditable v-html="content.subheading" @input="updateSubheading"></h2>
		<p ref="paragraph" contenteditable v-html="content.paragraph" @input="updateParagraph"></p>
	</div>
	<script type="module">
		const app = Vue.createApp({
			data() {
				return {
					content: {
						heading: 'Editable Heading',
						subheading: 'Editable Subheading',
						paragraph: 'Editable paragraph text.',
					},
				}
			},
			methods: {
				updateHeading(event) {
					this.content.heading = event.target.innerHTML;
				},
				updateSubheading(event) {
					this.content.subheading = event.target.innerHTML;
				},
				updateParagraph(event) {
					this.content.paragraph = event.target.innerHTML;
				},
			},
		});
		app.mount('#app');
	</script>
</body>
</html>