Vue Components Not loading in laravel when deployed

I have a laravel Api witch have a dashword that i made with vue. It works perfectly on local but when i upload it, only example component will showup

this is my routes in laravel:(Web.php)

Route::get('/', function () {
    return view('welcome');
});
Route::get('/dashboard', function () {
    return view('dashboard');
});
Route::get('/admin', function () {
    return view('admin');
});

and this is my app template:(resources\views\app.blade.php)

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css" integrity="sha256-LWhzWaQGZRsWFrrJxg+6Zn8TT84k0/trtiHBc6qcGpY=" crossorigin="anonymous" />

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">



    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
   integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
   crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
   integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
   crossorigin=""></script>
</head>
<body>
    <div id="app">
        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>

and as you can see below there is no difference between admin view and welcome view: (resources\views\admin.blade.php)

@extends('app')

@section('content')
    <login-component></login-component>
@endsection

(resources\views\welcome.blade.php)

@extends('app')

@section('content')
    <example-component></example-component>
@endsection

and this is my app.js:

window.Vue = require('vue');

import Vue2Leaflet from 'vue2-leaflet';
import Vue2LeafletMarkerCluster from 'vue2-leaflet-markercluster';


Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('dashboard-component', require('./components/DashboardComponent.vue').default);
Vue.component('login-component', require('./components/LoginComponent.vue').default);

const app = new Vue({
    el: '#app'
});

I also tried to replace "/" route view with admin view but it does not work ether in both ways this is what i get inside inspect element:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="xt8Oj40miZxS9Ja3CsXkNkI5YEtVMshm4NSInWK0">

    <title>Laravel</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css" integrity="sha256-LWhzWaQGZRsWFrrJxg+6Zn8TT84k0/trtiHBc6qcGpY=" crossorigin="anonymous" />

    <!-- Scripts -->
    <script src="http://ser.macanads.com/js/app.js" defer></script>
    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <link href="http://ser.macanads.com/css/app.css" rel="stylesheet">



    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
   integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
   crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
   integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
   crossorigin=""></script>
</head>
<body>
    <div id="app">
        <main class="py-4">
                <login-component></login-component>
        </main>
    </div>
</body>
</html>

dashboard component:

<template>
  <div class="container">
    <div id="cover"></div>
    <nav>
      <a href="#" class="nav-item">تغییر گذرواژه</a>
      <a href="#" class="nav-item logout" @click="logout">خروج</a>
    </nav>
    <aside>
      <section>
        <img src="#" class="logo">
        <h1>اپلیکیشن ماکان</h1>
      </section>
      <ul>
        <li class="aside-item">
          <router-link to="/" class="nav-link">لیست تبلیغات</router-link>
        </li>
        <li class="aside-item">
          <router-link to="/cats" class="nav-link">دسته های مادر</router-link>
        </li>
        <li class="aside-item">
          <router-link to="/subcats" class="nav-link">دسته های فرزند</router-link>
        </li>
        <li class="aside-item">
          <router-link to="/states" class="nav-link">استان ها</router-link>
        </li>
        <li class="aside-item">
          <router-link to="/cities" class="nav-link">شهر ها</router-link>
        </li>
        <li class="aside-item">
          <router-link to="/keywords" class="nav-link">کلید های واژه</router-link>
        </li>
      </ul>
    </aside>
    <main>
      <router-view/>
    </main>
  </div>
</template>

<script>
import router from "./DashboardRouter";

export default {
  router,
  mounted(){
    (document.getElementById('cover')).style.display='none';
  },
  methods:{
    logout(){
      localStorage.removeItem('user');
      window.location.href = "/admin";
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./resources/sass/app.scss";

* {
  margin: 0;
  padding: 0;
  font-family: Iranyekan, Montserrat;
}
#cover{
  position: fixed;
  background-color: #111;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}
.container {
  display: grid;
  grid-template-areas:
    "nav aside"
    "main aside";
  grid-template-rows: 80px auto;
  grid-template-columns: auto 300px;

  @include mobile() {
    grid-template-areas:
      "nav"
      "aside"
      "main";
    grid-template-rows: 80px auto auto;
    grid-template-columns: auto;
  }
}

nav {
  grid-area: nav;
  background: white;
  box-shadow: 0 0 10px 10px rgba($color: #000000, $alpha: 0.16);
  padding: 0 10px;

  .nav-item {
    display: block;
    float: right;
    text-decoration: none;
    background: rgba($color: #fff, $alpha: 0.5);
    padding: 10px;
    @include vertical-center();
    color: black;
    font-weight: bold;
    overflow: hidden;
    border-radius: 5px;
    &::before {
      @include before-after-content();
      border-radius: 100%;
      background: rgba($color: #000000, $alpha: 0.05);
      transition: all 0.5s;
      transform: scale(0);
      z-index: -1;
    }
    &:hover::before {
      border-radius: 0;
      transform: scale(2);
    }
  }

  .nav-item.logout {
    float: left;
    background: rgb(209, 31, 31);
    border-radius: 5px;
    margin: 0 10px;
    color: white;
  }
}

aside {
  grid-area: aside;
  background-color: #111111;
  section {
    text-align: center;
    margin: 20px;
    img {
      border-radius: 50%;
      background-color: #fff;
      width: 200px;
      height: 200px;
    }
    h1 {
      color: white;
      font-weight: bold;
      font-size: 30px;
    }
    @include mobile() {
      display: none;
    }
  }
  ul {
    list-style: none;
    li {
      text-align: center;
      .nav-link {
        transition: all 0.1s;
        text-decoration: none;
        color: white;
        display: block;
        padding: 10px 0;
        justify-self: center;
        font-size: 20px;
        &:hover {
          background: rgba($color: #fff, $alpha: 0.1);
        }
      }
    }
  }
}

main {
  grid-area: main;
  min-height: calc(100vh - 100px);
  background: #f3f3f3;
  padding: 10px;
}

.loading {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba($color: #000000, $alpha: 0.3);
  &::before,
  &::after {
    @include before-after-content();
    border-radius: 50%;
    border-top: 5px solid white;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  &::before {
    width: 80px;
    height: 80px;
    animation: spinner linear 1s infinite;
  }
  &::after {
    width: 100px;
    height: 100px;
    animation: spinner linear 0.8s infinite;
  }
}

@keyframes spinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

login component:

<template>
  <div class="container">
    <form @submit.prevent="submit">
      <h1>صفحه مدیریت</h1>
      <input type="text" name="username" id="username" v-model="username" placeholder="نام کاربری">
      <input type="password" name="password" id="password" v-model="password" placeholder="رمز عبور">
      <button type="submit">ورود</button>
    </form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      username: "",
      password: "",
      message: "nothing"
    };
  },
  methods: {
    submit() {
      this.message = "wait";
      axios
        .post(
          "/api/super_user/login",
          {
            username: this.username,
            password: this.password
          },
          {
            validateStatus: function(status) {
              return true;  // Reject only if the status code is greater than or equal to 500
            }
          }
        )
        .catch(function(error) {
        })
        .then(function(response) {
            if(response.data.result){
                alert(response.data.message);
                localStorage.setItem('user',JSON.stringify(response.data.user));
                window.location.href = '/dashboard'
            }
            else{
                alert(response.data.message);
            }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./resources/sass/app.scss";
.container {
  background-color: #111;
  height: 100vh;
  form {
    width: 300px;
    display: grid;
    grid-gap: 20px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(0, 119, 255);
    padding: 20px;
    border-radius: 5px;
    h1 {
      color: white;
      text-align: center;
    }
    input,
    button {
      border: none;
      border-radius: 5px;
      background: #fff;
      padding: 10px;
      direction: rtl;
    }
    button {
      cursor: pointer;
      font-size: 25px;
      position: relative;
      overflow: hidden;
      padding: 5px;

      &::before {
        @include before-after-content();
        border-radius: 100%;
        background: rgba($color: #000000, $alpha: 0.05);
        transition: all 0.5s;
        transform: scaleX(0);
        z-index: 1;
      }
      &:hover::before {
        border-radius: 0;
        transform: scaleX(2);
      }
    }
  }
}
</style>

Edit

I've found the problem there is nothing wrong with the code i just found out that app.js in the main folder is not updating when i run "npm run dev" i also tried other npm commands but they don't work ether. how do i build my project for deployment then?