Use TinyMCE component with Inertia Form Submission

[jasperf]

Been working on and learning about Laravel Jetstream using Vue and Inertia. Well I made this component now to load TInyMCE editor to edit articles. I have not added submission yet nor data to store and load. One of the reasons is that I wonder if I can use Inertia Forms to do all this with current component

<script setup>

import { Head } from '@inertiajs/vue3';
import AppLayout from '@/Layouts/AppLayout.vue';
import Editor from '@tinymce/tinymce-vue';
import { useForm } from '@inertiajs/vue3';

defineProps({ 
    article: Object,
    AppLayout,
    'editor': Editor,
})


// Import TinyMCE
import tinymce from 'tinymce/tinymce';

// Default icons are required for TinyMCE 5.3 or above
import 'tinymce/icons/default';

/* Required TinyMCE components */
import 'tinymce/themes/silver';
import 'tinymce/models/dom';

/* Import a skin (can be a custom skin instead of the default) */
import 'tinymce/skins/ui/oxide/skin.css';

// Any plugins you want to use has to be imported
import 'tinymce/plugins/link';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/image';
import 'tinymce/plugins/anchor';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/media';

/* content UI CSS is required */
import contentUiSkinCss from 'tinymce/skins/ui/oxide/content.css';

/* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */
import contentCss from 'tinymce/skins/content/default/content.css';


</script>

<template>
    <app-layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Article: {{article.title}}
            </h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white p-4 overflow-hidden shadow-xl sm:rounded-lg">
                   <editor
                    :init="{
                        content_css: false, 
                        skin: false,
                        content_style: contentUiSkinCss.toString() + '\n' + contentCss.toString(),
                        height: 500,
                        menubar: false,
                        plugins: [
                            'link', 'lists','image', 'anchor', 'wordcount', 'media'
                            ],
                        toolbar:
                        'undo redo | formatselect | bold italic backcolor | \
                        alignleft aligncenter alignright alignjustify | \
                        bullist numlist outdent indent | removeformat'
                    }"
                    />
                </div>
            </div>
        </div>
    </app-layout>
</template>

So far I have only seen https://inertiajs.com/forms with basic form submission using standard route.post and form tags. Any pointers on how could deal with the submission in an Inertia kind of way with this vue component? And possibly use Laravel controller to store data?

[jasperf]

Bit further now, but routes are not working.

<script setup>

import AppLayout from '@/Layouts/AppLayout.vue';
import Editor from '@tinymce/tinymce-vue';
import { reactive } from 'vue';
import { router } from '@inertiajs/vue3';
import PrimaryButton from '@/Components/PrimaryButton.vue';

// Import TinyMCE
import tinymce from 'tinymce/tinymce';

// Default icons are required for TinyMCE 5.3 or above
import 'tinymce/icons/default';

/* Required TinyMCE components */
import 'tinymce/themes/silver';
import 'tinymce/models/dom';

/* Import a skin (can be a custom skin instead of the default) */
import 'tinymce/skins/ui/oxide/skin.css';

// Any plugins you want to use has to be imported
import 'tinymce/plugins/link';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/image';
import 'tinymce/plugins/anchor';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/media';

/* content UI CSS is required */
import contentUiSkinCss from 'tinymce/skins/ui/oxide/content.css?inline';

/* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */
import contentCss from 'tinymce/skins/content/default/content.css?inline';

defineProps({ 
    article: Object,
    AppLayout,
    'editor': Editor,
})

const form = reactive({
  body: '',
//   body: article.body,
})

function submit() {
  router.post('/dashboard/articles', form)
}

// function submit() {
//   router.post('/dashboard/articles/' + article.id, { ...form, article })
// }


</script>

<template>
    <app-layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Article: {{article.title}}
            </h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white p-4 overflow-hidden shadow-xl sm:rounded-lg">
                   <editor
                    :init="{
                        content_css: false, 
                        skin: false,
                        content_style: contentUiSkinCss.toString() + '\n' + contentCss.toString(),
                        height: 500,
                        menubar: false,
                        plugins: [
                            'link', 'lists','image', 'anchor', 'wordcount', 'media'
                            ],
                        toolbar:
                        'undo redo | formatselect | bold italic backcolor | \
                        alignleft aligncenter alignright alignjustify | \
                        bullist numlist outdent indent | removeformat'
                    }"
                    v-model="form.body"
                    />
                </div>
                <button type="submit" @click="submit">Submit</button>
            </div>
        </div>
    </app-layout>
</template>

Opened thread at https://laracasts.com/discuss/channels/laravel/failing-to-add-article-content-to-database-or-load-existing-in-editor as well but Larry could not really help me out thus far..