Fetch Data and Populate in Text Boxes if Selected Dropdown Option

QUESTION UPDATED WITH CURRENT STATUS

I'm using Laravel 5.7 & VueJs 2.5.* ...

I want to autofill my form textboxes with the values in database when i select dropdown option. i've been finding solution since days but didn't get any success. I'm very new at this.

WHAT I WANT TO DO:

I have two invoices VendorInvoice and CustomerInvoice, I created my VendorInvoice, fill all data and store in DB. But when i want to create CustomerInvoice, i need to fetch & autofill the same data which i filled and stored in DB for VendorInvoice. So when i create CustomerInvoice, I have a <select> options of VendorInvoice_no, by selecting any option CustomerInvoice form fields should auto fill with the VendorInvoice & VendorInvoiceItems data. So i don’t have to fill same data by myself again in `CustomerInvoi.

In my code:

VendorInvoice = ticketInvoice && VendorInvoiceItems = ticketInvoiceItems

CustomerInvoice = ctInvoice && CustomerInvoiceItems = ctInvoiceItems

If anyone could help to get me out from this issue i'll be very grateful. Thank You.

Here Is my HTML <select> & some ctInvoice & ctInvoiceItems fields which i want to autofill:

    <form @submit.prevent="editmode ? updateCtInvoice() : createCtInvoice()">
      <div class="modal-body">
        <div class="row">

          <!-- =====VENDOR INVOICE SELECTION===== -->
          <select id="ticket_invoice_no" v-model="selectedTicketInvoiceId" @change="getRecord" name="ticket_invoice_no" type="text" class="form-control">
            <option v-for="ticketInvoice in ticketInvoices" :key="ticketInvoice.id" :value="ticketInvoice.id">{{ ticketInvoice.ticket_invoice_no }}</option>
          </select>

          <!-- =====CUSTOMER TICKET INVOICE NUMBER===== -->
          <input v-model="form.ct_invoice_no" type="text" name="ct_invoice_no" class="form-control">

          <!-- =====CUSTOMER TICKET INVOICE ITEMS===== -->
          <tbody>
            <tr v-for="(ctInvoiceItem, key) in form.ctInvoiceItems" :key="key">
              <!--Passenger Name-->
              <td>
                <input v-model="ctInvoiceItem.ct_passenger_name" size="40" type="text" name="ct_passenger_name" class="table-control form-control">
              </td>

              <!--Ticket No.-->
              <td>
                <input v-model="ctInvoiceItem.ct_ticket_no" size="24" type="text" name="ct_ticket_no" class="table-control form-control">
              </td>

              <!--Flight No.-->
              <td>
                <input v-model="ctInvoiceItem.ct_flight_no" size="7" type="text" name="ct_flight_no" class="table-control form-control">
              </td>
          </tbody>

My @change="getRecord" method:

    getRecord: function(e) {
      axios
        .get("api/ticket-invoice/fetch/" + this.selectedTicketInvoiceId)
        .then(({
          data
        }) => {
          console.log(data);
          this.form = data; // assumes the data keys maps directly to the form properties!!
        })
        .catch(error => {
          console.log(error.response);
        });
    }

Route:

Route::get('ticket-invoice/fetch/{ticket_invoice}', 'API\TicketInvoiceController@fetch')->name('ticket-invoice.fetch');

My fetch(){} method:

    public function fetch($id) {
      $ticketInvoices = TicketInvoice::findOrFail($id);

      return response() ->json([
        'id' => '',
        'customer_id' => '',
        'ct_invoice_no' => $ticketInvoices->ticket_invoice_no,
        'ct_invoice_date' => $ticketInvoices->ticket_invoice_date,
        'ct_invoice_fares_total' => $ticketInvoices->ticket_invoice_fares_total,
        'ct_invoice_grand_total' => $ticketInvoices->ticket_invoice_grand_total,
        'ctInvoiceItems' => $ticketInvoices->ticketInvoiceItems->map(function($item) {
          return [
            // get the relevant $item->property for each key below
            'id' => "",
            'ct_invoice_id' => "",
            'ct_passenger_name' => $item->passenger_name,
            'ct_fares' => $item->fares,
            'ct_sub_total' => $item->sub_total
          ];
        }) ->all()
      ]);
    }

My data() in Vue Component:

    data() {
      return {
        editmode: true,
        selectedTicketInvoiceId: false,
        ticketInvoices: {},
        ctInvoices: {},
        customers: null,
        form: new Form({
          id: "",
          customer_id: "",
          ct_invoice_no: "",
          ct_invoice_date: "",
          ct_invoice_fares_total: 0,
          ct_invoice_grand_total: 0,

          ctInvoiceItems: [{
            id: "",
            ct_invoice_id: "",
            ct_passenger_name: "",
            ct_fares: 0,
            ct_sub_total: 0
          }]
        })
      };
    },

When i select option i see in my Vue Component that specific id data fill in my form:. but its not actually fill my input fields with that data, so i could do some changes in the data and finally store it in DB as a customerInvoice.

Vue Dev Tool BEFORE SELECTING OPTION:

Vue Dev Tool AFTER SELECTING OPTION:

BUT NOT FILLING FIELDS: