After Vue.delete or $delete UI is not updating - vue.js

Question

this is my first question on stackoverflow.
So, I try to delete a item from array, I see, that in Vue Dev Tools it was deleted, but UI not updating.
I become this array as response from Laravel API and send dynamic to Vue Component like this
...
<admin-panel :jurisdictions="{{ $jurisdictions }}"></admin-panel>
...
then in my AdminComponent I redirect to AdminHomeComponent with props like this
<template>
<router-view :jurisdictions="jurisdictions"></router-view>
</template>
...
props: ['jurisdictions'],
...
created() {
this.$router.push({ name: "AdminHomeComponent" }).catch(err => {});
},
...
In AdminHomeComponent I have props too and router link to another component JurisdictionsComponent like this
<template>
...
<router-link :to="{name: 'JurisdictionsComponent'}"> Jurisdictions</router-link>
...
</template>
<script>
...
props: ["jurisdictions"]
...
</script>
And then will fun, wenn in JurisdictionsComponent I add a new one, or editing old one it works, there are reactive, but if I try to delete one, it still be reactive and I see this in Vue Dev Tools, but I cann't unterstand, why UI not updating..
JurisdictionsComponent
<template>
<div class="w-100">
<div id="jurisdictionsContainer" ref="jurisdictionsContainer">
<div class="panel-heading d-flex justify-content-between">
<h3 class="panel-title">Jurisdictions</h3>
<div class="pull-right">
<button #click.prevent="$modal.show('create-edit-jurisdiction', {'action' : 'create'})">
<i class="fas fa-plus-square"/> Create new
</button>
</div>
</div>
<table class="table table-hover mt-2 rounded" id="jurisdictions-table">
<thead class="thead-dark ">
<tr>
<th>Title</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="jurisdictions-table-body">
here I make v-for
<tr v-if="jurisdictions !== null" v-for="(jurisdiction, index) in this.jurisdictions" v-bind:key="jurisdiction.id"
class="result clickable-row"
#click="show($event, jurisdiction)">
<td class="title">
{{ jurisdiction.title }}
</td>
<td class="position-relative">
<button #click="$modal.show('create-edit-jurisdiction', {'jurisdiction': jurisdiction, 'index': index, 'action' : 'edit'})">
<div class="not-clickable">Edit</div>
here a show a delete modal window, use can deside delete or not, my code from ModalDeleteComponent see below
</button>
<button #click="$modal.show('delete-jurisdiction', {'jurisdiction': jurisdiction, 'index': index})">
<div class="not-clickable">Delete</div>
<i class="fas fa-trash-alt not-clickable"/>
</button>
</tr>
</tbody>
<delete-jurisdiction #onDeleted="onClickDelete"/>
<create-edit-jurisdiction #create="onClickCreate" #edit="onClickEdit":errors="this.errors.createEdit"/>
</div>
</div>
</template>
<script>
export default {
name: "JurisdictionsComponent",
props: ["jurisdictions"],
data() {
return {
isAllSelected: false,
errors: {
createEdit: {},
addEvent: {}
},
}
},
methods: {
/**
* Create a new jurisdiction
*
* #param data form
*/
onClickCreate(data) {
axios.post("/admin-dashboard/jurisdictions", data.form)
.then(response => {
response.data.image === undefined ? response.data.image = null : response.data.image;
response.data.selected = false;
this.jurisdictions.push(response.data);
this.$modal.hide("create-edit-jurisdiction");
this.errors.createEdit = {}
})
.catch(errors => {
this.errors.createEdit = errors.response.data.errors;
});
Here a try to delete jurisdiction, it deletes from database, from props in Vue Dev Tools but not from UI
/**
* Delete jurisdiction request
*
* #param index
*/
onClickDelete(index) {
axios.delete("/admin-dashboard/jurisdictions/" + this.jurisdictions[index].id)
.then(() => {
this.$delete(this.jurisdictions, index);
this.$modal.hide("delete-jurisdiction");
})
.catch(errors => {
console.log(errors)
});
},
/**
* Edit a jurisdiction
*
* #param data form
*/
onClickEdit(data) {
axios.patch(this.jurisdictions[data.index].path, data.form)
.then(response => {
this.$set(this.jurisdictions, data.index, response.data);
this.$modal.hide("create-edit-jurisdiction");
this.errors.createEdit = {}
})
.catch(errors => {
this.errors.createEdit = errors.response.data.errors;
})
},
}
</script>
ModalDeleteComponent
<template>
<modal name="delete-jurisdiction" #before-open="beforeOpen" height="200" #before-close="beforeClose">
<div class="h-100">
<div v-if="jurisdiction !== null" class="p-4 mt-2">
<h3>Do you want really delete
<a :href="'/admin-dashboard/jurisdictions/'+jurisdiction.id"><strong>{{ jurisdiction.title }}</strong></a>
<span v-if="jurisdiction.events.length > 0">
with {{ jurisdiction.events.length }} {{ jurisdiction.events.length === 1 ? 'event' : "events"}}
</span>?
</h3>
</div>
<div class="bg-dark d-flex justify-content-around p-2 position-absolute w-100" style="bottom: 0">
<button class="btn btn-danger" #click="submitDelete">Delete</button>
<button class="btn btn-secondary" #click="$modal.hide('delete-jurisdiction')">Cancel</button>
</div>
</div>
</modal>
</template>
<script>
export default {
name: "ModalDeleteJurisdictionComponent",
data() {
return {
jurisdiction: null,
index: ""
}
},
methods: {
submitDelete() {
this.$emit('onDeleted', this.index);
},
beforeOpen (event) {
this.jurisdiction = event.params.jurisdiction;
this.index = event.params.index;
},
beforeClose(event) {
this.jurisdiction = null;
this.index = "";
}
}
}
</script>
I know, my question is too long, but if anyone tries to answer this, I will very happy))
I'm open to any contra questions. Sorry for my English

Answer 1

So, thanks oshell for a tipp. Ich have renamed in jurisdictions to dataJurisdictions and init in created() {this.dataJurisdictions = this.jurisdictions} as well. First of all I want to avoid duplication of data in components and work only with props, but nevertheless it works. Thanks a lot!

Answer 2

You are adding to jurisdictions, which is a prop.
this.jurisdictions.push(response.data);
However, you should either update the prop in the parent component, to trigger a prop change and re-render or assign the prop to the components data as initial value and then update data.
Changing prop in parent component can be done using $emit or by using Vuex.
Assigning data locally just needs a different value name.
this.localJurisdictions = this.jurisdictions
And for updating then use this new data value. (Use accordingly in template.)
this.localJurisdictions.push(response.data);