Editing and adding data through the same form?

Question

JavaScript

I'm making a web application with Vue.js.
I want to do adding and editing list data through the same HTML form. There are no problems with adding, but editing cannot be done. How to pass the data of the selected element to the form?
Tried using this method:

editItem: function(index) {
      this.item = this.items[index];
      $('#modal').modal('show');
    }

the data is transferred, but after that there are several bugs. For example, after clicking the edit button and closing the form, if you click on Add, the data remains. Resetting the form doesn't help. data binding is in progress.
In general, the question is: how to competently implement editing and adding records through the same form on Vue.js?
Here is an example of what I want to do: https://jsfiddle.net/nskdima/7Lucbkwt/2/

Answer 1

Something like this https://jsfiddle.net/7Lucbkwt/6/