I'm using vue quill in my app to provide some document creation features. I need to have multiple instances of quill that needs to be created when the user click on a button.

At the moment I have created this code in my vue component that is used to display the rich text editor

    <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>

This is the code I have at the moment into the ProgramEditor child component

<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>

How I can create multiple instances of quill editor component when the user will click the preposed button I will create?