How to properly resolve the issue in VueJS?

Question

JavaScript

Started learning VueJS.
And here I ran into a problem.
There is data:

{
  items: [
    {
      id: 1,
      name: 'Lawnmower',
      fields: [
        {
          name: 'Horsepower',
          type: 'number',
          value: '717',
          default: '0'
        }
      ]
    }
  ]
}

This is a piece of the returned object, there are many such items, as well as fields for each of the items.
Items are displayed in a table with id and name values ​​via v-for="item in items"
When clicking on a table row ( v-on:click="editItem(item)"), a function is triggered that takes the current item. The function opens a modal window where item.name and item.fields should be displayed.
So, how do I use this function to return item.name and item.fields in the modal window?
I have already broken my head about inventing code, in the docks everything is only on examples that do not look like a real project at all, and therefore these docks cannot be applied to real situations.

Answer 1

1) Make the modal a component and pass item through props.
2) Make the selectedItem variable, and set it in editItem, and use it in the modal.
Choose.

Answer 2

Create more model_name and modal_fields variables with empty values. When clicked, equate them to the values ​​of item.name and fields respectively. When closing the modal, clear them again