Добавление динамических полей ввода с помощью VueJs

Я использую Laravel 5.7 и VueJs 2.5.* ...

Я знаю, как добавлять поля ввода динамически, но для своего приложения я не понимаю, как это сделать. У меня есть «TicketInvoice.Vue», на этой странице у меня есть модальный загрузчик для создания и обновления моих счетов. У меня есть две таблицы базы данных, одна для TicketInvoice, а другая для TicketInvoiceItems .... TicketInvoiceItems - это массив, потому что у TicketInvoice много TicketInvoiceItems.

Мой тег <script>, вот все поля TicketInvoice:

<script>
  export default {
    data() {
      return {

        ticketInvoices: {},
        form: new Form({
          id: "",
          vendor_id: "",
          ticket_invoice_no: "",
          ticket_invoice_date: "",
          ticket_invoice_fares_total: "",
          ticket_invoice_taxes_grand_total: "",
          ticket_invoice_grand_total: "",
          ticket_invoice_grand_total_words: "",
          ticket_invoice_terms: "",

        })
      };
    },
</script>

TicketInvoiceItems = Data, и я хочу, чтобы их поле добавлялось динамически.

<script>
export default {
  data() {
    return {

     form: new Form({
    ticketInvoiceItems: [{

      ticket_invoice_id: '',
          passenger_name: '',
          ticket_no: '',
          flight_no: '',
          departure_date: '',
          sector: '',
          fares: '',
          tax_SB: '',
          tax_SRP: '',
          tax_YQ: '',
          tax_RG: '',
          tax_PK: '',
          tax_YR: '',
          tax_SF: '',
          tax_PTT: '',
          tax_OAS: '',
          tax_PSF: '',
          tax_PB: '',
          tax_OAD: '',
          total_tax_breakup: '',
          sub_total: ''
        }]
    };
  },
</script>

Вот мой код HTML:

<tbody>
<tr>

<!--Passenger Name-->
<td>
    <input v-model = "form.passenger_name" size = "40" type = "text" name = "passenger_name"    class = "table-control form-control" :class = "{ 'is-invalid': form.errors.has('passenger_name') }">
    <has-error :form = "form" field = "passenger_name"></has-error>
</td>

<!--Ticket No.-->
<td>
    <input v-model = "form.ticket_no" size = "24" type = "text" name = "ticket_no" class = "table-    control form-control" :class = "{ 'is-invalid': form.errors.has('ticket_no') }">
    <has-error :form = "form" field = "ticket_no"></has-error>
</td>

<!--Flight No.-->
<td>
    <input v-model = "form.flight_no" size = "7" type = "text" name = "flight_no" class = "table- control form-control" :class = "{ 'is-invalid': form.errors.has('flight_no') }">
    <has-error :form = "form" field = "flight_no"></has-error>
</td>

<!--Departure Date-->
<td>
    <input v-model = "form.departure_date" type = "date" name = "departure_date" class = "table-    control form-control" :class = "{ 'is-invalid': form.errors.has('departure_date') }">
    <has-error :form = "form" field = "departure_date"></has-error>
</td>

<!--Sector-->
<td>
    <input v-model = "form.sector" type = "text" name = "sector" class = "table-control form-   control" :class = "{ 'is-invalid': form.errors.has('sector') }">
    <has-error :form = "form" field = "sector"></has-error>
</td>

<!--DROPDOWN MENU-->
<td>
<div class = "dropdown">

    <button class = "btn btn-secondary dropdown-toggle" type = "button"     id = "dropdownMenuButton" data-toggle = "dropdown" aria-haspopup = "true" aria-   expanded = "false">
    </button>
<div class = "dropdown-menu form-group" aria-labelledby = "dropdownMenuButton">

<form class = "px-1 py-1">

<!--Taxes BreakUp-->
    <input v-model = "form.tax_SB" type = "number" name = "tax_SB" placeholder = "SB"
    class = "table-control form-control" :class = "{ 'is-invalid': form.errors.has('tax_SB') }">
    <has-error :form = "form" field = "tax_SB"></has-error>

    <input v-model = "form.tax_SRP" type = "number" name = "tax_SRP" placeholder = "SRP"
    class = "table-control form-control" :class = "{ 'is-invalid': form.errors.has('tax_SRP') }">
    <has-error :form = "form" field = "tax_SRP"></has-error>

    <input v-model = "form.tax_YQ" type = "number" name = "tax_YQ" placeholder = "YQ"
    class = "table-control form-control" :class = "{ 'is-invalid': form.errors.has('tax_YQ') }">
    <has-error :form = "form" field = "tax_YQ"></has-error>

    <input v-model = "form.tax_RG" type = "number" name = "tax_RG" placeholder = "RG"
    class = "table-control form-control" :class = "{ 'is-invalid': form.errors.has('tax_RG') }">
    <has-error :form = "form" field = "tax_RG"></has-error>

    <input v-model = "form.tax_PK" type = "number" name = "tax_PK" placeholder = "PK"
    class = "table-control form-control" :class = "{ 'is-invalid': form.errors.has('tax_PK') }">
    <has-error :form = "form" field = "tax_PK"></has-error>

    <input v-model = "form.tax_YR" type = "number" name = "tax_YR" placeholder = "YR"
    class = "table-control form-control" :class = "{ 'is-invalid': form.errors.has('tax_YR') }">
    <has-error :form = "form" field = "tax_YR"></has-error>

    <input v-model = "form.tax_SF" type = "number" name = "tax_SF" placeholder = "SF"
    class = "table-control form-control" :class = "{ 'is-invalid': form.errors.has('tax_SF') }">
    <has-error :form = "form" field = "tax_SF"></has-error>

    <input v-model = "form.tax_PTT" type = "number" name = "tax_PTT" placeholder = "PTT"
    class = "table-control form-control" :class = "{ 'is-invalid': form.errors.has('tax_PTT') }">
    <has-error :form = "form" field = "tax_PTT"></has-error>

    <input v-model = "form.tax_OAS" type = "number" name = "tax_OAS" placeholder = "OAS"
    class = "table-control form-control" :class = "{ 'is-invalid': form.errors.has('tax_OAS') }">
    <has-error :form = "form" field = "tax_OAS"></has-error>

    <input v-model = "form.tax_PSF" type = "number" name = "tax_PSF" placeholder = "PSF"
    class = "table-control form-control" :class = "{ 'is-invalid': form.errors.has('tax_PSF') }">
    <has-error :form = "form" field = "tax_PSF"></has-error>

    <input v-model = "form.tax_PB" type = "number" name = "tax_PB" placeholder = "PB"
    class = "table-control form-control" :class = "{ 'is-invalid': form.errors.has('tax_PB') }">
    <has-error :form = "form" field = "tax_PB"></has-error>

    <input v-model = "form.tax_OAD" type = "number" name = "tax_OAD" placeholder = "OAD"
    class = "table-control form-control" :class = "{ 'is-invalid': form.errors.has('tax_OAD') }">
    <has-error :form = "form" field = "tax_OAD"></has-error>
</form>
</div>
</div>
</td>

<!--Total Taxes Break Up-->
<td>
    <input v-model = "form.total_tax_breakup" type = "number" size = "10"     name = "total_tax_breakup" class = "table-control form-control" :class = "{ 'is-invalid':     form.errors.has('total_tax_breakup') }">
    <has-error :form = "form" field = "total_tax_breakup"></has-error>
</td>

<!--Fares-->
<td>
    <input v-model = "form.fares" type = "number" size = "10" name = "fares" class = "table-control   form-control" :class = "{ 'is-invalid': form.errors.has('fares') }">
    <has-error :form = "form" field = "fares"></has-error>
</td>

<!--Sub Total -->
<td>
    <input v-model = "form.sub_total" type = "number" size = "10" name = "sub_total" class = "table-  control form-control" :class = "{ 'is-invalid': form.errors.has('sub_total') }">
    <has-error :form = "form" field = "sub_total"></has-error>
</td>

<!--Remove Button-->
<td>
    <button class = "btn btn-default form-control" style = "background-color: transparent;"><i  class = "fas fa-times-circle text-fade-red"></i></button>
</td>
</tr>

<!--Add Button-->
    <button class = "btn btn-default" style = "background-color: transparent;"><i class = "fas fa-    check-circle text-green"></i></button>
</tbody>

введите описание изображения здесь