Javascript 如何在php表单中存储tiptap编辑器数据？

我想在php表单中使用TipTap编辑器作为textarea字段。我已经创建了一个Vue组件并将其传递到刀片视图

刀片视图：

<form method="post" action="{{ route('dashboard.edit.postInfo', $garage) }}">
     @method('PATCH')
     @csrf

     <div id="app">
        <editor content='{{ $garage->description }}'></editor>
     </div>

     <button type="submit">Save</button>
</form>

@方法（'补丁'）
@csrf
拯救

我的Vue组件：

<template>
<div class="editor">

    <div class="card p-2 mt-1">
        <editor-content :editor="editor" />
    </div>
    
    </div>
</template>

<script>
import { Editor, EditorContent } from 'tiptap'


export default {
    name: "editor",
    components: {
        EditorContent,
        
    },
    props: [
        'content'
    ],
    data() {
        return {
            
            editor: null,
    
        }
    },
    mounted() {
        this.editor = new Editor({
            content: this.content
        })
    },
    beforeDestroy() {
        // Always destroy your editor instance when it's no longer needed
        this.editor.destroy()
    },
}
</script>

从“tiptap”导入{Editor，EditorContent}
导出默认值{
姓名：“编辑”，
组成部分：{
编辑内容，
},
道具：[
“内容”
],
数据（）{
返回{
编辑：空，
}
},
安装的（）{
this.editor=新编辑器({
content:this.content
})
},
在…之前{
//当不再需要编辑器实例时，请始终销毁它
this.editor.destroy（）
},
}

我该怎么做？提前谢谢你

这是控制台。日志输出：

Editor {…}
   activeMarks: (...)
   activeNodes: (...)
   commands: (...)
   defaultOptions: (...)
   element: (...)
   options: Object
      autoFocus: (...)
      content: "<p>KFZ Meisterwerkstatt...</p>"

编辑器{…}
活动标记：（…）
活动节点：（…）
命令：（…）
默认选项：（…）
元素：（……）
选项：对象
自动对焦：（…）
内容：“KFZ迈斯特沃克国家……
”

---

一些用于发布的lorem ipsum文本

请尝试此绑定

：value=“editor”

---

然后你将获得

内容

在laravel中输入数据

注释不用于扩展讨论；这段对话已经结束。