TipTap Vue 3 starter component using script setup

TipTap.vue

<template>
    <div>
        <editor-content :editor="editor" />
    </div>
</template>

<script setup>
import { EditorContent, useEditor } from "@tiptap/vue-3";
import StarterKit from "@tiptap/starter-kit";
import { toRef, unref, watch } from "vue";

const props = defineProps({
    modelValue: {
        type: String,
        default: "",
    },
});
const emit = defineEmits(["update:modelValue"]);

watch(toRef(props, "modelValue"), (value) => {
    const unrefEditor = unref(editor);
    if (editor.getHTML() === value) {
        return;
    }
    editor.commandManager.setContent(value, false);
});

const editor = useEditor({
    content: props.modelValue,
    extensions: [StarterKit],
    onUpdate: () => {
        const unrefEditor = unref(editor);
        emit("update:modelValue", unrefEditor.getHTML());
    },
});
</script>