How Laravel Mix works

My mix-manifest.js file is like below.

{
    "/js/app.js": "/js/app.js",
    "/css/app.css": "/css/app.css",
    "/js/home.js": "/js/home.js",
    "/js/product.js": "/js/product.js",
    "/js/video.js": "/js/video.js",
    "/js/unit.js": "/js/unit.js",
    "/js/tax.js": "/js/tax.js",
    "/js/subcategory.js": "/js/subcategory.js",
    "/js/size.js": "/js/size.js",
    "/js/discount.js": "/js/discount.js",
    "/js/coupon.js": "/js/coupon.js",
    "/js/color.js": "/js/color.js",
    "/js/category.js": "/js/category.js",
    "/js/brand.js": "/js/brand.js",
    "/js/blog_category.js": "/js/blog_category.js",
    "/js/blog.js": "/js/blog.js",
    "/js/top_section.js": "/js/top_section.js",
    "/js/slider.js": "/js/slider.js",
    "/js/feature_section_two.js": "/js/feature_section_two.js",
    "/js/feature_section_three.js": "/js/feature_section_three.js",
    "/js/feature_section_one.js": "/js/feature_section_one.js",
    "/js/feature_section_four.js": "/js/feature_section_four.js",
    "/js/ad.js": "/js/ad.js",
    "/js/product_details_cart.js": "/js/product_details_cart.js",
    "/js/product_cart.js": "/js/product_cart.js"
}

I found some JavaScript files inside resources/assets/js/ like below.

I am working on Vue.js files located at resources/assets/js/components/backend/product/product/

My webpack.mix.js file is like below

mix.js('resources/assets/js/app.js', 'public/js')
   .js('resources/assets/js/category.js', 'public/js')
   .js('resources/assets/js/subcategory.js', 'public/js')
   .js('resources/assets/js/brand.js', 'public/js')
   .js('resources/assets/js/color.js', 'public/js')
   .js('resources/assets/js/unit.js', 'public/js')
   .js('resources/assets/js/discount.js', 'public/js')
   .js('resources/assets/js/tax.js', 'public/js')
   .js('resources/assets/js/size.js', 'public/js')
   .js('resources/assets/js/coupon.js', 'public/js')
   .js('resources/assets/js/product.js', 'public/js')
   .js('resources/assets/js/product_cart.js', 'public/js')
   .js('resources/assets/js/product_details_cart.js', 'public/js')
   .js('resources/assets/js/blog_category.js', 'public/js')
   .js('resources/assets/js/blog.js', 'public/js')
   .js('resources/assets/js/video.js', 'public/js')
   .js('resources/assets/js/slider.js', 'public/js')
   .js('resources/assets/js/ad.js', 'public/js')
   .js('resources/assets/js/top_section.js', 'public/js')
   .js('resources/assets/js/feature_section_one.js', 'public/js')
   .js('resources/assets/js/feature_section_two.js', 'public/js')
   .js('resources/assets/js/feature_section_three.js', 'public/js')
   .js('resources/assets/js/feature_section_four.js', 'public/js')
   .js('resources/assets/js/home.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

product.js file is added like below.

@section('app')
    <script src="{{ url('js/product.js') }}"></script>
@endsection

There is another js folder at root of the Server like below

I run npm run dev to compile JavaScrpt code.

My code is working in local machine but not working in Server.