Tinymce editor value is submitting as null to the server

I have created a custom tinymce editor component in inertia vue as:

<script setup>
import Editor from "@tinymce/tinymce-vue";

const props = defineProps({
    modelValue: String,
});

const emit = defineEmits(["update:modelValue"]);

const updateValue = (event) => {
    emit("update:modelValue", event.level.content);
};

</script>

<template>
    <Editor
        api-key="xxxxxxxxxxxxxx"
        :init="{
            toolbar_mode: 'sliding',
            plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons accordion',
            toolbar: 'undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl',
          }"
        :value="modelValue"
        initial-value=""
        @input="updateValue"
    />
</template>

<style scoped>
    @media (min-width: 1024px) {
        #sample {
            display: flex;
            flex-direction: column;
            place-items: center;
            width: 1000px;
        }
    }
</style>

and I am calling it as:

<template>
<TinyMceEditor id="content" v-model="postForm.content"/>
</template>

<script setup>

const postForm = useForm({
  title: null,
  content: null,
})

function submit() {
  postForm.post(route('dashboard.posts.store'))
}

</script>

What I might be doing wrong here?