Parsing error: Missing semicolon in Vue.js - vue.js

Question

I am trying to implement a rich text editor in Vue.js for a learning purpose. I've been following approach here:
https://roe.dev/blog/building-your-own-vue-rich-text-component
But I'm receiving an error while loading my localhost page.
Is my code missing something? Here are crucial parts:
App.vue ->
<template>
<div><Richinput/></div>
</template>
<script>
import Richinput from './components/Richinput.vue'
export default {
name: 'App',
components: {
Richinput
}
}
</script>
RichInput.vue ->
<template>
<div contenteditable #input="handleInput" #keydown="handleKeydown" />
</template>
<script lang="ts">
const exec = (command: string, value?: string) =>
document.execCommand(command, false, value);
const queryCommandValue = (command: string) =>
document.queryCommandValue(command);
export default {
props: {
value: { type: String, default: "" },
},
mounted() {
this.$el.innerHTML = this.value;
},
watch: {
value(newValue) {
if (this.$el.innerHTML !== newValue) this.$el.innerHTML = newValue;
},
},
methods: {
handleInput(e: InputEvent | KeyboardEvent) {
const { firstChild } = e.target as HTMLElement;
if (firstChild && firstChild.nodeType === 3) exec("formatBlock", "<p>");
else if (this.$el.innerHTML === "<br>") this.$el.innerHTML = "";
this.$emit("input", this.$el.innerHTML);
},
handleDelayedInput(e: KeyboardEvent) {
this.$nextTick(() => this.handleInput(e));
},
},
handleKeydown(e: KeyboardEvent) {
if (
e.key.toLowerCase() === "enter" &&
queryCommandValue("formatBlock") === "blockquote"
) {
this.$nextTick(() => exec("formatBlock", "<p>"));
} else if (e.ctrlKey) {
switch (e.key.toLowerCase()) {
case "b":
e.preventDefault();
this.$nextTick(() => exec("bold"));
break;
case "i":
e.preventDefault();
this.$nextTick(() => exec("italic"));
break;
case "u":
e.preventDefault();
this.$nextTick(() => exec("underline"));
break;
default:
break;
}
}
},
};
</script>