Passing json attribute on vue form field

I'm working a project that has Rails API for the back-end and Vue(Vuetify) for the front-end. There is a nice way of building a form using the <v-form></v-form> tag, but I'm having an issue implementing a field within my form that has a field for JSON. I can easily have one for a string with:

<v-text-field
        v-model="host"
        label="Host"
        solo-inverted
/>

I have an attribute participants, which is a nested array (json) that takes name and email. Been trying to find a way to have my vue form that can take an array.

Here is my database schema:

create_table "shows", force: :cascade do |t|
    t.string "host", null: false
    t.string "location", null: false
    t.text "message"
    t.json "participants", null: false
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false

Tried to find a field for JSON object on a v-form, but can't find anything in the official docs.

There's no built-in Vuetify form field that automatically displays an object. In this case, you have to explicitly bind each object property to a form field/label.

For example, consider participants to be this object:

{
  id: 'P1',
  label: 'Famous Mathematicians',
  names: [
    {
      first: 'Alan',
      last: 'Turing'
    },
    {
      first: 'Isaac',
      last: 'Newton'
    }
  ]
}

You could use Vue's string interpolation for participants.label and v-for to map participants.names like this:

<v-form>
  <h3>{{ participants.label }}</h3>
  <v-col v-for="name of participants.names">
    <v-text-field v-model="name.first" label="First name" />
    <v-text-field v-model="name.last" label="Last name" />
  </v-col>
</v-form>