Although a solution like this might work there is the built in vue delete method that can be used to both delete the object key, and update the view in one shot.
One way to use the delete method is as a global method of Vue. When using the delete method this was the delete method is called off of the main Vue global. Once I call it I then pass the object that I want to delete something from as the first argument, and then the index, or key name in the object that I want to delete.
So that is the basic idea at least of the vue dlete method, I pass the property of the data object I want to delete, and then a key as the second argument. The object property will then be deleted, and the view will render. There are a number of other ways that the delete method can be used to delete and object property from the data object thoyg, so lets look at a few more examples of this one.
So how about a full copy and past example of the vuejs delete method as well as a whole buch of other vuejs features. Here I have a very simple list example where I am using the vue delete method to delete names on a list when the name is given in a text input element and a delete button is pressed.
So this example makes use of vue el to attach to a hard coded html element by an id attribute, I am also making use of the vue template option to define additional html code that will be appended to the hard coded html element that I am attaching to. In this template I am using the vue for directive to repeat an element for each item in a collection, in this case an array of names. I am also using another important directive that a vuejs developer should be aware of called vue model that is what I need to use when working with text input elements and the data object. There are many otheer vuejs features being used such as the methods option, and vue on directive.