Как отобразить данные после обновления, не обновляя страницу с помощью Vue js?

Question

Я показываю данные из таблицы в моем индексе. vue. Когда пользователь нажимает кнопку редактирования, появляется модальное окно, и он может обновить свою информацию.

Обновление прошло успешно, новые данные вставляются в базу данных. Проблема в том, что после нажатия кнопки «Обновить» данные на текущей странице не обновляются. Обновление происходит только в том случае, если я на самом деле вручную обновил sh страницу. Я новичок в Vue, может быть, кто-то может помочь.

Вот мой код:

mounted() {
            this.loadGroupedData();
        },

methods: {
            loadGroupedData: async function() {
                try {
                    const response = await groupedService.loadGroupedData();
                    this.resumes = response.data.resumes;
                    this.video_one = response.data.video_one;
                    this.video_two = response.data.video_two;
                    this.video_three = response.data.video_three;
                    this.photos = response.data.photos;
                    this.profiles = response.data.profiles;
                } catch (error) {
                    this.$toast.error("Some error occurred, please refresh!");
                }
            },

updateProfile: async function() {
                try {
                    const formData = new FormData();
                    formData.append('photo_id', this.editProfileData.photo_id);
                    formData.append('employment_type', this.editProfileData.employment_type);
                    formData.append('date_of_birth', this.editProfileData.date_of_birth);
                    formData.append('experience', this.editProfileData.experience);
                    formData.append('skills', this.editProfileData.skills);
                    formData.append('resume_id', this.editProfileData.resume_id);
                    formData.append('video_one_id', this.editProfileData.video_one_id);
                    formData.append('video_two_id', this.editProfileData.video_two_id);
                    formData.append('video_three_id', this.editProfileData.video_three_id);

                    const response = await profileService.updateProfile(this.editProfileData.id, formData);

                    this.profiles.map(profile => {
                        if (profile.id == response.data.id) {
                            for (let key in response.data) {
                                profile[key] = response.data[key];
                            }
                        }
                    });

                    this.hideEditProfileModal();
                    this.$toast.success("Profile Updated Successfully!");
                } catch (error) {
                    this.$toast.error(error.response.data.message);
                }

            },

По сути, первый метод просто возвращает ответ Json. Затем я отображаю его на странице, используя v-for.

И вторая функция обновления.

Вот мои данные. Все вставляется в «анкеты: []». Я храню идентификаторы в таблице профилей вместо путей к файлам видео, фотографий и резюме. Так что в моем бэкэнде я выбираю данные из этих таблиц, чтобы я мог получить пути к файлам и отобразить вывод на странице.

data() {
            return {
                profiles: [],
                profile: [],
                video_one: [],
                video_two: [],
                video_three: [],
                resumes: [],
                photos: [],

                options: [
                    { text: "Full Time", value: "Full Time" },
                    { text: "Part Time", value: "Part Time" },
                ],

                profileData: {
                    photo_id: '',
                    employment_type: "Full Time",
                    date_of_birth: "",
                    experience: "",
                    skills: "",
                    resume_id: '',
                    video_one_id: '',
                    video_two_id: '',
                    video_three_id: ''
                },

                editProfileData: {
                    photo_id: '',
                    resume_id: '',
                    video_one_id: '',
                    video_two_id: '',
                    video_three_id: ''
                },

                errors: {}
            };
        },