Vue计算数组不更新表

Question

我在Vue遇到了一些麻烦。

我的问题是，当我从数组中删除元素时，我希望更新表。

    computed:{
        filteredUsers: function() {
            return this.users.filter((user) => {
                return user.name.toUpperCase().match(this.search.toUpperCase()) 
          ||  user.email.toUpperCase().match(this.search.toUpperCase())
          ||  user.phone.match(this.search)
            })
        }
    },

过滤后的数组从props：users获取数据。当我这样做时：

this.users.splice(1, 2);

数组filteredUsers没有得到更新的内容？

整个Vuecomponent：

    <script>
    export default {
        name: 'search-user-component',
        props: ['users'],
        data() {
            return {
               search: '',
            }
        },
        computed:{
            filteredUsers: function() {
                return this.users.filter((user) => {
                    return user.name.toUpperCase().match(this.search.toUpperCase()) 
              ||  user.email.toUpperCase().match(this.search.toUpperCase())
                })
            }
        },
        methods: {
          deleteUser(user) {
            if (confirm("Are you sure?")) {
              $.ajax({
                type: 'post',
                data: {_method: 'delete'},
                url: "/admin/users/delete/" + user.id,
                success: function(result){
                  if(!result.success){
                    alert(result.message);
                  }
                  else
                  {
                    this.updateUserTable(user);
                  }
                }.bind(this),
                    error: function(result){
                        console.log(result);
                    }.bind(this)
              }) 
            } 
          },
          updateUserTable(user){
            //this.users.splice(1, 2);
            location.reload();
          }
        }
    }
</script>
<template>
    <div>
        <div class="box box-primary">
        <div class="box-body">
        <div class="form-group">
            <label for="usr">Search user</label>
            <input type="text" class="form-control" v-model="search">
        </div>
        <table class="table table-bordered table-hover">
            <thead >
              <th >ID</th>
              <th>Name</th>
              <th>E-mail</th>
              <th>Mobile phone</th>
              <th>Title</th>
              <th>Role</th>
              <th></th>
            </thead>
            <tbody>
                <tr v-for="user in filteredUsers">
                  <td>{{ user.id }}</td>
                  <td><a :href="'/admin/users/' + user.id ">{{ user.name }}</a> </td>
                 <td>{{ user.email }}</td>
                  <td>{{ user.phone}}</td>
                  <td>{{ user.title }}</td>
                  <td>{{ user.role.name }}</td>
                    <td class="text-center">
                        <button class="btn btn-sm btn-danger" v-on:click="deleteUser(user)">delete</button>
                    </td>
                </tr>
            </tbody>
          </table>
        </div>
        </div>
    </div>
</template>