عدم اجرای اسکریپت dropzone در لاراول و ویو جی اس

سلام به همگی

در فایل زیر دوتا اسکریپت هست که به صورت همزمان کار نمی کند

اسکریپت 1

<script type="text/javascript" src="{{asset('/js/dropzone.js')}}"></script>

اسکریپت 2

    <script type="text/javascript" src="{{asset('js/app.js')}}"></script>

مشکل اصلی ، عدم امکان انتخاب عکس در dropzone می باشد درصورتی که اگر کد اسکریپت Vue js را Comment کنم مشکلی در آپلود عکس ندارم

ممنون میشم کد بنده رو چک کنید و پاسخ بدید

فایل blade بنده به شرح زیر می باشد

@extends('admin.layout.master')
@section('head')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
@endsection
@section('styles')
    <link rel="stylesheet"  href="{{asset('/css/dropzone.css')}}">

{{--    <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/min/dropzone.min.css">--}}
@endsection
@section('content')
    <section  class="content" id="app">

        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">ایجاد محصول جدید</h3>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body ">

                <div class="row">
                    <div class="col-md-6 col-md-offset-3">
                        <form id="form" method="post"  action="/administrator/products" >
                            @csrf

                            <div class="form-group">
                                <label for="title">نام</label>
                                <input type="text"  name="title" placeholder="عنوان محصول را وارد کنید..." class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="slug"> نام مستعاد</label>
                                <input type="text"  name="slug" placeholder="نام مستعار  را وارد کنید..." class="form-control">
                            </div>
                            <attribute-component :brands="{{$brands}}"></attribute-component>



                            <div class="form-group">
                                <label >وضعیت نشر</label>
                                <div class="form-control">
                                    <input type="radio"  name="status" value="0" checked><span class="margin-r-5" >منتشر نشده</span>
                                    <input type="radio"  name="status" value="1"><span class="margin-r-5">منتشر شده</span>
                                </div>

                            </div>
                            <div class="form-group">
                                <label >قیمت</label>
                                <input type="number"  name="price" placeholder="قیمت محصول  را وارد کنید..." class="form-control">
                            </div>
                            <div class="form-group">
                                <label >قیمت بعد از تخفیف</label>
                                <input type="number"  name="discount_price" placeholder="قیمت تخفیف خورده  را وارد کنید..." class="form-control">
                            </div>
                            <div class="form-group">
                                <label >توضیحات برند</label>
                                <input type="text"  name="description" placeholder="توضیحات محصول  را وارد کنید..." class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="photo">گالری تصاویر</label>
                                <input  name="photo_id" type="hidden"  id="product-photo">
                                <div class="dropzone" id="photo"></div>
                            </div>
                            <div class="form-group">
                                <label >عنوان سئو</label>
                                <input type="text"  name="meta_title" placeholder="عنوان سئو را وارد کنید..." class="form-control">
                            </div>
                            <div class="form-group">
                                <label >توضیحات سئو</label>
                                <textarea type="text"  name="meta_desc" placeholder="توضیحات سئو را وارد کنید..." class="form-control"></textarea>
                            </div>
                            <div class="form-group">
                                <label >کلمات کلیدی</label>
                                <input type="text"  name="meta_keywords" placeholder="کلمات کلیدی را وارد کنید..." class="form-control">
                            </div>

                            <button  type="submit"  class="btn btn-success pull-left" data-toggle="tooltip" title="میتوانید برای ذخیره دکمه ی F1 را بزنید">ذخیره</button>





                        </form>
                    </div>
                </div>


            </div>
        </div>
    </section>

@endsection
@section('script-vuejs')
    <script type="text/javascript" src="{{asset('js/app.js')}}"></script>
@endsection
@section('scripts')

    <script type="text/javascript" src="{{asset('/js/dropzone.js')}}"></script>
    <script>
        Dropzone.autoDiscover = false;
        const x = new Dropzone('#photo', {
            addRemoveLinks: true,
            maxFiles: 100,
            url: "{{route('photos.upload')}}",
            sending: function (file, xhr, formData) {
                formData.append("_token", "{{csrf_token()}}")
            }
            ,
            success: function (file, response) {
                document.getElementById('product-photo').value = response.photo_id

            }
        });
    </script>
@endsection

با تشکر

علت اینکه این پکیج به صورت جداگانه با ویو جی اس کار نمی کنه تداخل کدهای جاوا اسکریپت هست که در بخش توابع Dropzonejs اتفاق می افته. بهترین توصیه برای کار کردن ویو جی اس و dropzonejs استفاده از یک پکیج بسیار معروف و عالی به نام vue2-dropzone هست. در این پکیج شما می توانید به راحتی تمام امکانات و قابلیت های dropzone را در vuejs پیاده سازی کنید.

برای نصب پکیج از دستور زیر استفاده کنید:

npm install vue2-dropzone

این هم یک کد نمونه برای اتصال به پکیج هست که به راحتی می توانید تصاویر خودتون رو با کیفیت بهتری آپلود کنید:

<vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions"></vue-dropzone>
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'
export default {
  name: 'app',
  components: {
    vueDropzone: vue2Dropzone
  },
  data: function () {
    return {
      dropzoneOptions: {
          url: 'https://httpbin.org/post',
          thumbnailWidth: 150,
          maxFilesize: 0.5,
          headers: { "My-Awesome-Header": "header value" }
      }
    }
  }
}

این لینک شما را به صفحه مستندات این پکیج هدایت می کند.