Why does an asynchronous component produce two files as output?

Question

Vue.js

Hello, there is such a component, I did not include part of the code here, because it is not needed within the framework of this question. The filename of this component is vue-dropzone.vuea path elements/vue-dropzone.

<template>
    <vue-dropzone
            ref="myVueDropzone"
            id="dropzone"
            :options="dropzoneOptions">
        <p class="dropzone-elem__title">Загрузить изображение</p>
    </vue-dropzone>
</template>
<script>
     import VueDropzone from 'vue2-dropzone'; // Подключаю dropzone которая в node_modules, скачивал с помощью npm
     export default { ... }
</script>

Then I load this component asynchronously in another component in the following way:

const MyDropzone = () => import(/* webpackChunkName: "js/dropzone" */ './../elements/vue-dropzone');

It was expected that in the end one file will be downloaded dropzone.js, and it will have my component, and the component that was downloaded using npm vue2-dropzone. But for some reason, two files are loaded.
And they have such paths:
http://rtm/vendors~js/dropzone.js
http://rtm/js/dropzone.js
see the screenshot below.

As I understand it, along the path: http://rtm/vendors~js/dropzone.jsthere is a vue2-dropzone component
And along the path: http://rtm/js/dropzone.jsalready my component, the code of which is above.
Can you please tell me why there are two files? Thank you in advance for your response

Answer 1

It seems that we need to dig in this direction:
https://webpack.js.org/plugins/split-chunks-plugin/
I'm doing this project on laravel, using laravel-mix
Link to documentation from laravel-mix
https://laravel-mix.com/docs/4.0 /quick-webpack-con...