How do I re-render a table component on screen after changing json data in Vue?

I am at a beginner level and learning vue at the moment.

All I am trying to do at the moment is having the table reload(re-render) itself so that the change from db.json file is applied on the table on the screen. I created a modal that adds data (name, email, contacts) to the db.json file once the save button is clicked.

However, the problem is that I have to manually reload the page (by pressing ctrl+R) in order for the changed data to be applied on the table.

Here is the script section of "Modal.vue" file (child component)


<script>
export default {
  name: "TeamAddModal",
  props: {
    visible: Boolean,
    variant: String,
  },
  data() {
    return {
      openClose: this.visible,
      memberName: "",
      memberEmail: "",
      memberContacts: "",
    };
  },
  methods: {
    showModal() {
      this.openClose = !this.openClose;
    },
    handleSave() {
      if (this.memberName.length > 0) {
        console.log(this.memberName, this.memberEmail, this.memberContacts);
        this.openClose = !this.openClose;
        let userData = {
          name: this.memberName,
          email: this.memberEmail,
          contacts: this.memberContacts,
        };
        fetch("http://localhost:3000/teaminfo", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(userData),
        })
          .then(() => {
            this.$router.push("/");
          })
          .catch((err) => console.log(err));
        this.memberName = "";
        this.memberEmail = "";
        this.memberContacts = "";
      }
    },
  },
  watch: {
    visible: function (newVal, oldVal) {
      this.openClose = newVal;
      console.log("new" + newVal + "==" + oldVal);
    },
  },
};
</script>

I would like the parent component(with the table) to re-render and show the change in json data once the 'save' button is clicked from the modal.

I have tried searching up for the solution in google and youtube, and it seems that :key may do the work, but I'm not sure if that really is the solution. I'll be very grateful for the help.

Solution

Once you get success response from the POST method API call on save, There could be a two solutions :

You can emit the userData object from modal component to parent and push this emitted object in the table data array.
On successful save, You can emit a success flag from modal component to parent component and then invoke a GET call to receive real time data from an API itself and bind the whole data into table.

In modal component :

handleSave() {
    ...
    ...     
    let userData = {
        name: this.memberName,
        email: this.memberEmail,
        contacts: this.memberContacts,
    };
    fetch("http://localhost:3000/teaminfo", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(userData),
    })
    .then(() => {
        this.$emit('save-success'); ✅
        this.$router.push("/"); ❌
    })
}

In parent component :

<modal-component @save-success="getTableData"></modal-component>

getTableData() {
  // Make an API call to get the real time updated data and assign that to the table data items variable.
}