问在nuxt中支持更改时如何更新组件

EN

<template>
<div>
 <b-table-column
     field="InvoiceNo"
     label="Invoice No"
     sortable
     v-slot="props"
     >
      <a @click="selectInvoice(props.row.id)">
         {{ props.row.invoiceNumber }}
      </a>
 </b-table-column>
<Invoice :invoiceId="selectedInvoice" />
</div>
</template>

<script>
import axios from "axios";
import Invoice from "../../../components/Invoice.vue";
export default {
  components: {
    Invoice,
  },
  data() {
    return {
      selectedInvoice: "",
   }
  },
methods: {
   selectInvoice(invoiceId) {
    this.selectedInvoice = invoiceId;
   },
}

}

</script>

    <script>
import axios from "axios";
export default {
  props: ["invoiceId"],
  data() {
    return {
      invoiceData: "",
    };
  },

  watch: {
    invoiceId: function (newVal, oldVal) {
      this.fetchData(newVal)
    },
    deep: true,
    immediate: true,
  },

  methods: {
    async fetchData(invoiceId) {
      let { data: invoiceDetails } = await axios.get(
        `${process.env.backendapi}/invoice/byid?invoiceId=${invoiceId}`
      );
      return {
        invoiceData: invoiceDetails,
      };
    },
  },
};
</script>