Is there a working solution to load custom HTML Elements in the vue-dropzone message area?

Question

I've been working around my code using vue-js and vue-dropzone to handle drag-&-drop upload functionality to a site. I added ":useCustomSlot=true" to to the parent html-tag but the content i placed in the dropzone tag is not rendering on the DOM! Can you understand what the issue is.

the page is still rendering the default message from the vue-dropzone.

Here are the codes:

    <vue-dropzone   id="customdropzone"  
                ref="myVueDropzone"
                :options="dropzoneOptions"
                :useCustomSlot=true>
  <div class="dropzone-custom-content">
    <h3 class="dropzone-custom-title">Drag and drop to upload content!</h3>
    <div class="subtitle">...or click to select a file from your computer</div>
  </div>
</vue-dropzone>

And the Vue Instance:

var App = new Vue({
    el:'#app',
    data: {
        ...,
        dropzoneOptions: {
            url: './upload.php',
            addRemoveLinks: true,
            thumbnailWidth: 150,
            maxFilesize: 3, // MB
            maxFiles:1,
            acceptedFiles: '.png,.jpg,.mp4',
            headers: { "My-Awesome-Header": "header value" },
        }
    },
    components: {
            vueDropzone: vue2Dropzone
    }
});

Answer 1

try :use-custom-slot="true" (kebab-case)