How to properly make a dynamic v-model in Vue?

Question

Vue.js

On the person's profile page, I need to parse the JSON coming from the back to his data card (+ highlight the data for which the messages came) and separately display the dynamic number of inputs for those fields where 'type': 'ERROR': 1) with v-model initially equal to the corresponding value from the data object, 2) show the human field name next to it, and 3) the value of the message.

I managed to display the data, but when I started writing inputs: 1) I get a crutch on a crutch, 2) I got to "v-model is initially equal to the corresponding value from the data object" and I don’t understand how to do it, 3) help :o

The Element-UI library is also used, but if you are not familiar with it, everything seems to be intuitive here

JSON example

{
        'status': 'OK',
        'messages': [
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'tin_number',
            'value': 'Number incorrect'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'documents.guid12345.number',
            'value': 'Selfie is incorrect'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'date_of_birth',
            'code': 'sfddsf',
            'value': 'Selfie is incorrect'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'last_name',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'place_of_birth',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'source_of_funds',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'nationality',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-g-Kz3XoAAj-3.address_type',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-g-Kz3XoAAj-3.street',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-g-Kz3XoAAj-3.house',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-g-Kz3XoAAj-3.barangay',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-g-Kz3XoAAj-3.zip_code',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-h-vjgjaQx7-3.address_type',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-h-vjgjaQx7-3.country',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-h-vjgjaQx7-3.province',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-h-vjgjaQx7-3.municipality',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-h-vjgjaQx7-3.street',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-h-vjgjaQx7-3.house',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-h-vjgjaQx7-3.barangay',
            'value': 'PROCESS'
          },
          {
            'type': 'ERROR',
            'context': 'FIELD',
            'path': 'addresses.ohUhNk-h-vjgjaQx7-3.zip_code',
            'value': 'PROCESS'
          }
        ],
        'data': [
          {
            'verification_status': 'NEED_ADDITIONAL_INFO',
            'first_name': 'MikS',
            'middle_name': 'Val',
            'last_name': 'Nokia',
            'phone': '639305236773',
            'email': '[email protected]',
            'date_of_birth': '1988-05-30',
            'place_of_birth': 'Ekb',
            'gender': 'MALE',
            'source_of_funds_id': 10,
            'source_of_funds': 'Others',
            'nationality_id': 171,
            'nationality': 'Philippines',
            'addresses': [
              {
                'guid': 'guid3',
                'country_id': 170,
                'country': 'Peru',
                'province_id': 15,
                'province': 'CORDILLERA ADMINISTRATIVE REGION (CAR)',
                'municipality_id': 119,
                'municipality': 'PAGUDPUD',
                'barangay_id': 2100,
                'barangay': 'Laoa',
                'street': 'fdgashgf',
                'house': 'House22',
                'zip_code': '2902',
                'address_type': 'PRESENT'
              },
              {
                'guid': 'ohUhNk-g-Kz3XoAAj-3',
                'country_id': 171,
                'country': 'Philippines',
                'province_id': 13,
                'province': 'REGION XII (SOCCSKSARGEN)',
                'municipality_id': 118,
                'municipality': 'NUEVA ERA',
                'barangay_id': 2201,
                'barangay': 'Santo Tomas',
                'street': 'SomeStreet',
                'house': 'House100',
                'zip_code': '2905',
                'address_type': 'PRESENT'
              },
              {
                'guid': 'ohUhNk-h-vjgjaQx7-3',
                'country_id': 178,
                'country': 'Reunion (French)',
                'province_id': 13,
                'province': 'REGION XII (SOCCSKSARGEN)',
                'municipality_id': 118,
                'municipality': 'NUEVA ERA',
                'barangay_id': 2200,
                'barangay': 'Salanap',
                'street': 'SomeStreet',
                'house': 'House100',
                'zip_code': '2905',
                'address_type': 'PRESENT'
              }
            ],
            'tin_number': '12324-352523',
            'documents': [
              {
                'guid': 'guid12345',
                'type_id': 1,
                'number': '1234-5466',
                'expired_at': '2020-10-23'
              },
              {
                'guid': 'guid1234567',
                'type_id': 2,
                'number': '1257-6424',
                'expired_at': '2019-08-23'
              }
            ],
            'photos': [
              {
                'guid': 'guid123',
                'type': 'SIGNATURE'
              }
            ]
          }
        ]
      }

Answer 1

got to "v-model is initially equal to the corresponding value from the data object" and I don't understand how to do it

When creating an array describing the form elements, cut the strings with the paths to the values ​​into pieces (the separator is a dot). Using the resulting arrays, get values ​​from data, put them in objects that describe the form elements. Everything, you can use v-model:

<el-form-item v-for="n in formItems">
  <el-input v-model="n.value" />

https://jsfiddle.net/3q706bp9/
If you want the values ​​in data to change when using v-model, then after cutting the string with the path, pull out the last value from the resulting array - this is the key, the name of the property. The object in which this property is located is taken from data, based on what is left in the array. Put the key and the resulting object into an object that describes the form element. And in the template do this:

<el-form-item v-for="n in formItems">
  <el-input v-model="n.obj[n.key]" />

Since the object in data and the object in the object describing the form element are the same, when the second one changes, the first one will also change.
https://jsfiddle.net/x6ncpo90/