How to setup form validation (Vue, Element)?

Question

Vue.js

The code is 90% the same as the example from the documentation

https://jsfiddle.net/st56h3ky/
The only difference is that I have added a new nesting level. Namely, dynamicValidateFormnested in MainForm.
However, I am getting an error Cannot read property 'domains' of undefined.
The task is simple - to validate the nested object.
If you remove the nesting of MainForm, then everything works, but I need it with it.
I suspect that the problem is somewhere here: :prop="'domains.' + index + '.value'".

Answer 1

:model="MainForm"Should be instead :model="MainForm.dynamicValidateForm".
And :rules="rules"replace with :rules="rules.value".
UPD. Taken from the comments:

can I refer :model="MainForm"in the main form, and pass it to propsdynamicValidateForm

No problems:

:prop="`dynamicValidateForm.domains.${index}.value`"

Answer 2

Do you have all this code in .vue format in your project? If so, then data must be a function, not an object.

Answer 3

There must be no objects inside data otherwise they will not be reactive, i.e. changes to objects inside data in vue are not tracked.
There can be arrays, but there are limitations with arrays, not all array methods are tracked.