Vue.js удалить элемент при удалении

используйте индекс, это как ключ для соединения элемента из списка

<tbody>
    <tr v-for = "(school,index) in schools" v-bind:key = "school.id">
        <td>{{ school.id }}</td>
        <td>{{ school.name }}</td>
        <td>
            <button
            class = "btn btn-danger"
            v-on:click = "deleteSchool(school.id,index)">
            Delete
            </button>
        </td>
    </tr>
</tbody>

deleteSchool(id,index)
{
  let uri = `http://localhost/schools/${id}`;
  this.axios.delete(uri);
  this.schools.splice(index, 1);
}

Используя ES6, это можно было бы сделать и так, с помощью findIndex().

<tbody>
  <tr v-for = "school in schools" :key = "school.id">
    <td>{{ school.id }}</td>
    <td>{{ school.name }}</td>
    <td>
      <button
        class = "btn btn-danger"
        @click = "deleteSchool(school.id)">
        Delete
      </button>
    </td>
  </tr>
</tbody>

methods: {
  deleteSchool(id) {
    const uri = `http://localhost/schools/${id}`;

    this.axios.delete(uri);

    const schoolIndex = this.schools.findIndex(school => school.id === id);

    this.schools.splice(schoolIndex, 1);
  }
}