Vue.js 在 Vue 中更改 json 数据后，如何在屏幕上重新呈现表格组件

目前我还处于初学者阶段，正在学习VUE.

目前，我所要做的就是重新加载(重新呈现)表，以便将来自db.json文件的更改应用于屏幕上的表.我创建了一个模型，一旦单击保存按钮，就会将数据(姓名、邮箱、联系人)添加到db.json文件中.

然而，问题是我必须手动重新加载页面(通过按ctrl+R)，以便将更改后的数据应用到表中.

以下是"modal.vue"文件(子组件)的脚本部分

<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>

我希望父组件(带有表)在从模式中单击‘保存’按钮后重新呈现并显示json数据中的更改.

我试着在谷歌和YouTube上搜索解决方案，似乎:Key可能会起作用，但我不确定这是否真的是解决方案.我将非常感谢你的帮助.