Remove item from v-for loop

I have a v-for loop to go through an array of tags:

<li v-for="tag in tags">
	<a :href="'tag/' + tag.slug">
		{{ tag.name }}
	</a>
	<a href="#" v-if="editing" @click="deleteTag(tag)">
		x
	</a>
</li>

My deleteTag method calls a Laravel method to delete the tag. This works. But I then want the tag to be removed from the list in the front-end.

deleteTag(item) {
    $.post('/deleteTagPivot', {
        'main_id': item.pivot.main_id,
        'tag_id': item.pivot.tag_id,
    }, function(data) {
        that.editing = false;
        // Somehow remove the tag...
    });
 }

How can I do this?

I found the answer here:

https://forum.vuejs.org/t/how-can-i-remove-item-after-delete/2359

I know this thread is old but I figured someone could be facing this in a later time.

It is recommended to re-fetch new list/data from the server after such delete action.
That way you are very sure that data was truly deleted and you will also be getting back the new data.

So, in the process where your DELETE call is successful, just in your success scope, re-call your previous fetch method.

Take this axios request for an instance

        axios
          .delete("/api/tags", data)
          .then(()=> {
           this.getAllTags(); // this line re-fetches the tag as soon as a delete is successful 
          })
          .catch(error => {
            console.log(error.message);
          });

Of course, your getAllTags() method makes a get request and must populate your local list.