invoice.vue

<!-- PARENT -->

<script>
const editInvoiceModal = Vue.component({
      template: () => vue.h('div', { props: }, [{
        vue.h('div', { title: '' }, [
          
        ])
      }])
});
 {
  coponents: {
    EditInvoiceModal: editInvoiceModal
  }
 }
</script>
<template>
  <div v-for="invoice in invoices">
    <button @click="() => editedInvoice = invoice"
    <EditInvoiceModal
      v-if="editedInvoice"
      :invoice="editedInvoice"
      @save="(changeObbject) => Object.assign(editedInvoice, changeObject)"
      @close="() => editedInvoice = null"
    />
  </div>
</template>

<!-- CHILD / EditInvoiceModal.vue -->
<script>
{
  data: {
    name: null,
    dueDate: null,
  },

  created() {
    this.invoiceChange = { ...this.props.editedInvoice };
  },
  methods: {
    saveChanges() {
      this.emit('save', {
        name: this.data.name,
      });
    }
  }
}
</script>
<template>
   <input name="invoiceName" v-model="invoiceChange.name" />
   <button @click="saveChanges" />
</template>