How do I control a split form?

Question

I have a system that has a lot of <input>necessary to assemble a requisition, they are divided into 4 parts (components), each part having one or more subparts (subcomponents)

I don’t want to save the data to the server gradually, the server will only receive a request with all the data. So I need to store it locally

I had two ideas:

1. Create a template for each component and subcomponent and issue an event when it is completed that will be heard by the root component, there will be managed data

2. Locally save data pads in Localstorage, when the last step is ready, mount the request

Remarks:

• In model 1 the data will be saved locally anyway, but this will be done only by the root component, already in model 2 this will be done by each component or subcomponent

• Because it is a very large form, it may not be fully completed in a single moment, just as it may be necessary to start a new registration, but keeping the previous one saved to finish later

How to make this control simple and readable? Other ways are welcome

_{Doubt is not how to implement, but which to implement}