Estoy usando vue quill en mi aplicación para proporcionar algunas funciones de creación de documentos. Necesito tener varias instancias de quill que deben crearse cuando el usuario hace clic en un botón.

Por el momento, he creado este código en mi componente vue que se usa para mostrar el editor de texto enriquecido

 <div class="container-fluid" id="editorWrapper"> <div class="row"> <ProgramEditor v-model="programTitle" v-model:cover="programCover" v-model:description="programDescription" v-model:content="programContent"></ProgramEditor> </div> </div>

Este es el código que tengo en este momento en el componente secundario ProgramEditor

 <template> <div class="col-sm-12 col-md-9 col-lg-9 p-0 mb-3" id="programEditorWrapper"> <input type="text" class="form-control mb-2 rounded-0" id="" placeholder="Title" @input="$emit('update:modelValue', $event.target.value)"> <input type="text" class="form-control mb-2 rounded-0" id="" placeholder="Description" @input="$emit('update:description', $event.target.value)"> <label class="mb-1" for="programCover"> <input id="programCover" accept="image/*" type="file" class="form-control" ref="programCover" hidden> <small> <a class="text-decoration-none"> Upload image </a> </small> </label> <QuillEditor ref="programEditor" theme="snow" content-type="html" toolbar="full" @update:content="$emit('update:content', $event)"></QuillEditor> </div> </template>

¿Cómo puedo crear varias instancias del componente del editor de pluma cuando el usuario haga clic en el botón propuesto que crearé?