Как в vue сделать задержку

У меня на форме создания пользователя .При отправка срабатывает вызов обновления списка пользователя но запрос выполняется быстрее чем запись в бд. Так как массив возвращается без добавленного объекта usrer . Как можно сделать задержку вызова обновления функции?.

<template>
    <div class="container">
        <div class="row mt-5">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">User List</h3>
                        <div class="card-tools">
                            <div>
                                <button class="btn btn-success"  data-toggle="modal" data-target="#addNew">Add New
                                <i class="fas fa-user-plus"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    {{messages}}
                    <!-- /.card-header -->
                    <div class="card-body table-responsive p-0">
                        <table class="table table-hover text-nowrap">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Type</th>
                                <th>Registered</th>
                                <th>Modify</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="user in users" :key="user.id">
                                <td>{{user.id}}</td>
                                <td>{{user.name}}</td>
                                <td>{{user.email}}</td>
                                <td><span class="tag tag-success">{{user.type | upText}}</span></td>
                                <td>{{user.created_at|myDate}}</td>
                                <td>
                                    <a href="#">
                                    <i class="fas fa-edit"></i>
                                    </a>
                                    <a href="#">
                                        <i class="fas fa-trash text-red"></i>
                                    </a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
        </div>
        <!-- /.row -->
        <!-- Modal -->
        <div class="modal fade" id="addNew" tabindex="-1" role="dialog" aria-labelledby="addNewLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addNewLabel">Add New</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form  @submit.prevent="createUser">
                    <div class="modal-body">
                        <div class="form-group">
                            <input v-model="form.name" type="text" name="name"
                                   placeholder="Name"
                                   class="form-control" :class="{ 'is-invalid': form.errors.has('name') }">
                            <has-error :form="form" field="name"></has-error>
                        </div>
                        <div class="form-group">
                            <input v-model="form.email" type="email" name="email"
                                   placeholder="Email"
                                   class="form-control" :class="{ 'is-invalid': form.errors.has('email') }">
                            <has-error :form="form" field="email"></has-error>
                        </div>
                        <div class="form-group">
                            <textarea v-model="form.bio" type="text" name="bio"
                                   placeholder="Bio short"
                                      class="form-control" :class="{ 'is-invalid': form.errors.has('bio') }"></textarea>
                            <has-error :form="form" field="bio"></has-error>
                        </div>
                        <div class="form-group">
                            <select  v-model="form.type" type="text" id="type" name="type"
                                      class="form-control" :class="{ 'is-invalid': form.errors.has('type') }">
                                <option value="">Select User Role </option>
                                <option value="admin">Admin</option>
                                <option value="user">Standard User</option>
                                <option value="author">Author</option>
                            </select>
                            <has-error :form="form" field="type"></has-error>
                        </div>
                        <div class="form-group">
                            <input v-model="form.password" type="password" name="password"
                                      class="form-control" :class="{ 'is-invalid': form.errors.has('password') }"/>
                            <has-error :form="form" field="password"></has-error>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Create</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                messages:'fff',
                users: {},
                form:new Form({
                    name:'',
                    password:'',
                    email:'',
                    photo:'',
                    type:'',
                    bio:''
                })
            }
        },
        methods: {
            loadUser(){
             axios.get("api/user").then(({data})=>(this.users=data.data));
              console.log(this.users)
            },
          createUser(){
                this.$Progress.start()
              this.form.post('api/user');
                Fire.$emit('AfterCreate')
                $('#addNew').modal('hide')
              toast.fire({
                  icon: 'success',
                  title: 'Signed in successfully'
              })
              this.$Progress.finish()
          }
        },
        created() {
            this.loadUser();
            Fire.$on('AfterCreate',()=>{
                setTimeout(this.loadUser(), 2000);
            })
            //setInterval(()=>this.loadUser(),5000)
        }
    }
</script>