So i have a few issue regarding my website development question.

This is how the page should look like

This is the page i am currently facing some issues

Problems:

1)When i select between Dashboard, Appointments, Users, Settings, Profile. It has no issues, but once i select Drag Sort, it kind of freezes and will not switch to other navigations once i selected the others. The websites need to be refresh to be able to switch.

2)The Drag Sort has an issue where it appears twice, If i try to fix the code and ctrl + s to save it will also add a new Drag Sort. I am trying to do a tutorial of Drag Sort from a youtube video. The code reads from a website to retrieve todos data. It also doesn’t appear at the page.

Below are the codes:

First is the web.php:

<?php

use IlluminateSupportFacadesRoute;
use AppHttpControllersAdminUserController;
use AppHttpControllersApplicationController;

Route::get('/', function () {
    return view('welcome');
});
Route::get('/api/users', [UserController::class, 'index']);

Route::post('/api/users', [UserController::class, 'store']);

Route::get('{view}', ApplicationController::class)->where('view', '(.*)');

Second is the app.js :

import './bootstrap';

import 'admin-lte/plugins/bootstrap/js/bootstrap.bundle.min.js';

import 'admin-lte/dist/js/adminlte.min.js';

import { createApp } from 'vue/dist/vue.esm-bundler.js';

// import { createApp } from 'vue';

import { createRouter, createWebHistory} from 'vue-router';

import Routes from './routes.js';

// import DragSortTodo from '.pages/drag_sort/DragSortTodo.vue';

//app.component('drag-sort-todo', DragSortTodo);



//Vue.component('drag-sort-todo', require('./pages/drag_sort/DragSortTodo.vue'));

const router = createRouter({

    routes: Routes,

    history: createWebHistory(),
});

const app = createApp({});
app.use(router);
app.mount('#app');

3rd is the route.js:

import Dashboard from './components/Dashboard.vue';
import ListAppointments from './pages/appointments/ListAppointments.vue';
import ListUsers from './pages/users/ListUsers.vue';
import UpdateSetting from './pages/settings/UpdateSetting.vue';
import UpdateProfile from './pages/profile/UpdateProfile.vue';
import DragSortTodo from './pages/drag_sort/DragSortTodo.vue';

export default [
    {
        path: '/admin/dashboard',

        name: 'admin.dashboard',

        component: Dashboard,


    },

    {
        path: '/admin/appointments',

        name: 'admin.appointments',

        component: ListAppointments,

    },

    {
        path: '/admin/users',

        name: 'admin.users',

        component: ListUsers,

    },

    {
        path: '/admin/settings',

        name: 'admin.settings',

        component: UpdateSetting,

    },

    {
        path: '/admin/profile',

        name: 'admin.profile',

        component: UpdateProfile,

    },

    {
        path: '/admin/drag-sort',

        name: 'admin.drag-sort',

        component: DragSortTodo,

    },


]

4th is the ListUser.vue:

<script setup>
import axios from 'axios';
import { ref, onMounted, reactive } from 'vue';
import { Form, Field } from 'vee-validate';
import * as yup from 'yup';

const users = ref([]);

const editing = ref(false);

const formValues = ref();

const getUsers = () => {
    axios.get('/api/users')
        .then((response) => {
            users.value = response.data;
        })
}

const schema  = yup.object({
    name: yup.string().required(),
    email: yup.string().email().required(),
    password: yup.string().required().min(8),
})

const createUser = (values, { resetForm }) => {

    axios.post('/api/users', values)
    .then((response) => {
        console.log(response);
        users.value.unshift(response.data);

        $('#userFormModal').modal('hide');
        resetForm();

    })


};

// const createUser = () => {
//     axios.post('/api/users', form)
//         .then((response) => {
//             users.value.unshift(response.data);
//             form.name = '';
//             form.email = '';
//             form.password = '';
//             $('#createUserModal').modal('hide');
//         });

// }

const addUser = () => {
    editing.value = false;
    $('#userFormModal').modal('show');

};

const editUser = (user) => {
    editing.value = true;
    $('#userFormModal').modal('show');
    formValues.value = {
        id: user.id,
        name: user.name,
        email: user.email,
    };

    // Form.value.setValues(formValues.value);

};

onMounted(() => {
    getUsers();
})


</script>

<template>
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Users 360</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Users</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="container-fluid">
            <button @click="addUser" type="button" class="mb-2 btn btn-primary">
                Add New User
            </button>
            <div class="card">
                <div class="card-body">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th style="width: 10px">#</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Registered Date</th>
                                <th>Role</th>
                                <th>Options</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(user, index) in users" :key="user.id">
                                <td>{{ index + 1 }}</td>
                                <td>{{ user.name }}</td>
                                <td>{{ user.email }}</td>
                                <td>-</td>
                                <td>-</td>
                                <td>
                                    <a href="#" @click.prevent="editUser(user)"><i class="fa fa-edit"></i></a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>


        </div>
    </div>

    <div class="modal fade" id="userFormModal" data-backdrop="static" tabindex="-1" role="dialog"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">
                        <span v-if="editing">Edit User</span>
                        <span v-else>Add New User</span>
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <Form @submit="createUser" :validation-schema="schema" v-slot="{ errors }" :initial-values="formValues">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="name">Name</label>
                            <Field name="name" type="text" class="form-control" :class="{'is-invalid': errors.name}" id="name"
                                aria-describedby="nameHelp" placeholder="Enter full name" />
                            <span class="invalid-feedback">{{ errors.name }}</span>
                        </div>

                        <div class="form-group">
                            <label for="email">Email</label>
                            <Field name="email" type="email" class="form-control" :class="{'is-invalid': errors.email}" id="email"
                                aria-describedby="nameHelp" placeholder="Enter full name" />
                            <span class="invalid-feedback">{{ errors.email }}</span>
                        </div>

                        <div class="form-group">
                            <label for="email">Password</label>
                            <Field name="password" type="password" class="form-control" :class="{'is-invalid': errors.password}" id="password"
                                aria-describedby="nameHelp" placeholder="Enter password" />
                            <span class="invalid-feedback">{{ errors.password }}</span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </Form>
            </div>
        </div>
    </div>


</template>

5th is the DragSortTodo.vue(Error page):

<template>
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">DragSort</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item active">DragSort</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>


    <div class="drag-sort-todo_wrapper">
        <h3 class="m">Sample Todo List</h3>

        <draggable v-model="todos" tag="ul" class="list-group">
            <transition-group>
                <li class="list-group-item" v-for="todo in todos" :key="todo.id">{{ todo.title }}</li>
            </transition-group>
        </draggable>

    </div>

</template>

<script>
import draggable from 'vuedraggable'
export default {
    components: {
        draggable
    },

    data() {
        return {
            todos: [],
        }
    },

    created() {
        this.fetchToDoList();

    },
    methods: {
        fetchToDoList() {
            window.axios.get('https://jsonplaceholder.typicode.com/todos')
                .then(response => {
                    this.todos = response.data.slice(0, 10); // Limit to 10 todos
                })
                .catch(error => {
                    console.error(error);
                });

        }
    }

}

</script>

I am using this video as a reference for my drag and sort function.
https://www.youtube.com/watch?v=9Ne2NE7j7jc&t=2s