[Vuejs]-Dropzone inside Vue transition modal doesn´t work

After trying multiple things i found the solution using an attribute "v-on:enter="enter" in transition and inside function initialize dropzone.

<transition name="modal" v-on:enter="enter" >
  ...... 
</transition>


enter: function () {
  
         $("div#uploadFile").dropzone({ 
                            
             url: "/demo/uploadFile"
             ......
         });
       },

I have experienced the same issue. I this the problem is mostly the v-if div:

<div **v-if=**"uploadModal" >
   <div id="uploadFile" class="dropzone col" style="border-style: dashed;">
      <div class="dz-message" data-dz-message>
          <div>upload file here ...</div>
      </div>
    </div>
</div>

VueJS seems to take control of everything happening there, to enable the dropzone, you will need to use @click or something to that effect. We just need to create the method that will be responsible for opening the FileInput:

methods: {
  openDropZone() {
      const dropzone =  Dropzone.options.myDropzone = {
        url: "http://localhost:8000/upload",
        maxFiles : 2,
        addRemoveLinks: true,
        headers: {
            "X-CSRFToken": "{{ csrf_token }}",
        },
      };
    dropzone.hiddenInputFile.click();
  }
}

Then we call the openDropZone() method from @click:

<div v-if="uploadModal" >
   <div id="uploadFile" **@click="openDropZone()"** class="dropzone col" style="border-style: dashed;">
     <div class="dz-message" data-dz-message>
         <div>upload file here ...</div>
     </div>
   </div>
</div>