How to dynamically remove and add a component?

Question

Vue.js

There is a Date component, you need to get data from it. By clicking on the "-" button, we delete the component, by clicking "Add date" we add it again. By clicking "Create event" we form an object to send it to the server.
I tried to show my work here .
What problems I cannot solve:
1. When a component is removed, everything is visually shown correctly, but if the data is printed, it is not correct
. now it works so that the last added date is not pushed into the array

Answer 1

I tried to show my work here .

Looks very sad. Well, it doesn't fucking work. So at this stage it will be very difficult to help you - it is not clear where the problems you are talking about manifest themselves (in general, you are talking about nothing, in more detail), and where are the jambs that you made when transferring the code to the sandbox.
Of the strange things that can be noted right away:
1. Using a date as a key - what, there can't be two events on the same date? Well, re-creating the component instance every time the date changes - it also looks kind of dumb.
2. Data update (onDateInfo) - write the data sent from the component to some incomprehensible object, always the same (and the instances of the Date component are still different). I don't understand this at all, it's a bug. Corrected a
littleyour code - at least the addition/deletion worked, and the data is updated as needed (if I understood everything correctly). Now you can start telling how to reproduce your problems - what to do, where to look.