How to manage highly nested forms in Vue?

Question

Vue.js

There is a form structure like this:

// Unit
{
  title,
  options: [Option],
  children: [Unit],
}

// Option
{
  title,
  value,
}

// form
[ Unit, Unit, Unit, Unit ... ]

This is an array of units whose children have the same units and options, and nesting of these units can be up to four levels. Options are final objects.

Appropriate rendering: many levels of nesting and recursive components
In addition to changing text values, you can change the order of elements in the array (drag-and-drop).

And the problem is that when I do everything according to the principle of passing data to child components through props and returning data to parents through $emit, then there is a delay in changing, and noticeable.
If I forget about this principle and simply change the initial array in the final components, the delay is zero and everything works super-fast.

How to act in such a situation?