use quill by vue render function h

there is the question I met yesterday. I fixed it and just wanna share here because I didn't find similar question.

I use Naive UI and create a table which can expand its column. and I want show a richTextEditor while expanding.

there is part of my code:

app.vue

{
  type: 'expand',
  renderExpand: (rowExpand) => {
    return h('div',[h(RichTextEditor,
      {
        toolbar: [],
        content: rowExpand.content,
        theme: '',
        disable: true,
      }
    )])  
  }
}

RichTextEditor.vue

<template>
  <div id="richTextEditor" ref="richTextEditor" :style="{ height: height + 'px' }"> </div>
</template>

<script lang="ts">
  import { defineComponent, onMounted, toRef, ref, } from '@vue/runtime-core'
  import Quill from 'quill'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  export default defineComponent({
    name: 'RichTextEditor',
    props: {
      height: {
        type: [Number, String],
        default: 'auto',
      },
      theme: {
        type: String,
        default: 'snow'
      },
      toolbar:{
        type: Array,
        default: [
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote', 'code-block'],

              [{ list: 'ordered' }, { list: 'bullet' }],
              [{ script: 'sub' }, { script: 'super' }],
              [{ indent: '-1' }, { indent: '+1' }],
              [{ direction: 'rtl' }],

              [{ size: ['small', false, 'large', 'huge'] }],
              [{ header: [1, 2, 3, 4, 5, 6, false] }],

              [{ color: [] }, { background: [] }],
              [{ align: [] }],

              ['link', 'image'],

              ['clean'],
            ]
      },
      content:{
        type: String,
        default: ''
      },
      disable:{
        type: Boolean,
        default: false
      }
    },
    setup(props) {
      var theme = toRef(props,'theme')
      var toolbar = toRef(props,'toolbar')
      var content = toRef(props,'content')
      var disable = toRef(props,'disable')

      var richTextEditor = ref()
      
      let quill: Quill | null = null
      const init = () => {
        const options = {
          modules: {
            toolbar: toolbar.value,
          },
          placeholder: '请输入文章内容…',
          theme: theme.value,
          readOnly: disable.value,
        }
        //quill = new Quill(document.getElementById('richTextEditor') as Element, options)
        //use 'getElementById' will cause the wrong column to be rendered
        quill = new Quill(richTextEditor.value as Element, options)
        if(content.value !== ''){
          quill?.setContents(JSON.parse(content.value))
        }
      }
      onMounted(init)
      const getHtmlContent = () => {
        return (document.getElementById('richTextEditor')?.firstChild as any).innerHTML
      }
      const getJsonContent = () => {
        return JSON.stringify(quill?.getContents())
      }
      
      const setContents = (content: any) => {
        console.log(content)
        quill?.setContents(JSON.parse(content))
      }

      return {
        richTextEditor,
        getHtmlContent,
        getJsonContent,
        setContents,
      }
    },
  })
</script>

if you new a quill with 'getElementById' as container, it will render the upper column when trying to render the lower column.
I guessed it happened because their ID is overlapped.
Naive UI's data table has its own v-for,so I can only take a guess.

I'm a newbie at VUE and JavaScript, if something wrong please comment below.