Невозможно загрузить файлы Vue JS из папки Static в шаблоне Django

Я создал папку templates в каталоге app. и там я создал другую папку с именем моего приложения, а затем я поместил туда свой html файл index.html. После этого я создал еще один каталог с именем static в папке проекта и поместил туда все файлы vue.js.

index.html :

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
    <div id="app" class="container">
        <h3 class="d-flex justify-content-center">
            Vue JS Front End
        </h3>
        <h5 class="d-flex justify-content-center">
            Dr. Appointment Portal
        </h5>

        <nav class="navbar navbar-expand-sm bg-light navbar-dark">
            <ul class="navbar-nav">
            <li class="nav-item m-1">
                <router-link class="btn btn-light btn-outline-primary"
                to="/home">Home</router-link>
            </li>
            <li class="nav-item m-1">
                <router-link class="btn btn-light btn-outline-primary"
                to="/doctor">Doctor</router-link>
            </li>
            <li class="nav-item m-1">
                <router-link class="btn btn-light btn-outline-primary"
                to="/appointment">Appointment</router-link>
            </li>
            </ul>
        </nav>
        <router-view></router-view>
    </div>

    <script src="{% static 'variables.js' %}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.10.1/qs.min.js"></script>
    <script src="{% static home.js %}"></script>
    <script src="{% static doctor.js %}"></script>
    <script src="{% static appointment.js %}"></script>
    <script src="{% static app.js %}"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

В моей папке static: enter image description here

В моем app.js:

 const routes=[
        {path:'/home',component:home},
        {path:'/doctor',component:doctor},
        {path:'/appointment',component:appointment}
    ]
    
    const router=new VueRouter({
        routes
    })
    
    const app = new Vue({
        router
    }).$mount('#app')

Я получаю вывод (при запуске Django Server):

enter image description here

Но когда я нажимаю на кнопку, она не работает. Я не смог загрузить туда свои js файлы. Пожалуйста, помогите мне.

Вернуться на верх