data that has been saved in form shows but fresh data doesn't show?!

Please help,

My form on my page only shows the data that I have recently saved, not the data that is fresh in the mongodb?!

<template>
  <div>
    <v-expansion-panels>
      <v-expansion-panel>
        <v-expansion-panel-title>
          <template v-slot:default="{ expanded }">
            <v-row no-gutters>
              <v-col cols="4" class="d-flex justify-start">
                Course Config</v-col
              >
              <v-col cols="8" class="text-grey">
                <v-fade-transition leave-absolute>
                  <span v-if="expanded" key="0"> Enter configuration </span>
                  <span v-else key="1">
                    {{ this.coursesuite }} / {{ this.coursename }} /
                    {{ this.courseid }} / {{ this.lms }} /
                    {{ this.defaultlang }}
                  </span>
                </v-fade-transition>
              </v-col>
            </v-row>
          </template>
        </v-expansion-panel-title>
        <v-expansion-panel-text>
          <v-form v-model="valid" lazy-validation ref="form">
            <v-container>
              <div class="list-group-item">
                <v-row>
                  <v-col cols="12" md="4">
                    <v-text-field
                      v-model="this.coursesuite"
                      :rules="nameRules"
                      :counter="100"
                      label="Course Suite"
                      required
                    ></v-text-field>
                  </v-col>
                  <v-col cols="12" md="4">
                    <v-text-field
                      v-model="this.coursename"
                      :rules="nameRules"
                      :counter="100"
                      label="Course Name"
                      required
                    ></v-text-field>
                  </v-col>
                  <v-col cols="12" md="4">
                    <v-text-field
                      v-model="this.courseid"
                      :rules="nameRules"
                      :counter="100"
                      label="Course ID"
                      required
                    ></v-text-field>
                  </v-col>
                </v-row>
                <v-row>
                  <v-col cols="6" md="3">
                    <v-checkbox v-model="this.lms" label="LMS">{{
                      this.lms
                    }}</v-checkbox>
                  </v-col>
                  <v-col cols="6" md="3">
                    <v-text-field
                      v-model="this.defaultlang"
                      :rules="nameRules"
                      :counter="2"
                      label="Course Default Lang"
                      required
                    ></v-text-field>
                  </v-col>
                </v-row>
              </div>
            </v-container>
            <v-btn @click="exportFile(this.$route.params.course)">Export</v-btn>
            <v-btn class="mr-4" @click="saveData(this.$route.params.course)">
              submit
            </v-btn>
          </v-form>
        </v-expansion-panel-text>
      </v-expansion-panel>
    </v-expansion-panels>
  </div>
</template>
<script>
import { defineComponent } from "vue";
import axios from "axios";
export default defineComponent({
  name: "CourseConfig",
  data: () => ({
    valid: false,
    course: {},
    id: "",
    coursesuite: "",
    coursename: "",
    courseid: "",
    lms: false,
    defaultlang: "",
    nameRules: [
      (v) => !!v || "Name is required",
      (v) => v.length <= 100 || "Name must be less than 10 characters",
    ],
    courses: [],
  }),
  methods: {
    async fetchCourses() {
      const courseResponse = await axios.get(
        `http://127.0.0.1:8000/api/course/${this.$route.params.course}`
      );
      let courselang = courseResponse.data + this.$route.params.lang;

      console.log("courselang: " + courselang);
      this.coursesuite = courseResponse.data.en.config.coursesuite;
      this.coursename = courseResponse.data.en.config.coursename;
      this.courseid = courseResponse.data.en.config.courseid;
      this.lms = courseResponse.data.en.config.lms;
      this.defaultlang = courseResponse.data.en.config.defaultlang;
      console.log("HERE I AM: ", courseResponse.data.en.config.coursesuite);
    },
    async exportFile(_id) {
      const exportedData = await axios.get(
        `http://127.0.0.1:8000/api/course/${_id}/export`
      );
      console.log("HERE: ", exportedData.data);
      this.$swal("File Exported!");
    },
    validate() {
      this.$refs.form.validate();
    },
    async saveData(_id) {
      const exportedData = await axios.patch(
        `http://127.0.0.1:8000/api/course/${this.$route.params.lang}/config/${_id}`,
        {
          coursesuite: this.coursesuite,
          coursename: this.coursename,
          courseid: this.courseid,
          lms: this.lms,
          defaultlang: this.defaultlang,
        }
      );
      console.log("Data: ", exportedData.data);
      this.$swal("Data saved!");
    },
  },
  async mounted() {
    await this.fetchCourses();
  },
});
</script>