Is there a way to dynamically update the example variable {{user.email}} when the user makes changes to the input field? I've already tested the backend functionality using Postman and everything is working fine.

On the frontend, I'm utilizing Vue.js along with Axios. I have set up a form with an update button to submit the request. The new data entered into the input field gets saved in my MySQL database through Sequelize.

How can I implement a dynamic refresh so that the input field reflects the updated value? Are there specific properties that need to be utilized?

<template>

 //component profile//
 <main>
    <div class="container mt-4" v-if="user">
      <div class="row justify-content-center">
        <div class="col">
          <section class="row">
            <div class="col">
              <div class="card color-bg my-3">
                <div class="card-header">
                  <div class="row justify-content-around">
                    <p class="m-1">Hello {{ user.firstname }} !</p>
                  </div>
                </div>

                <div class="card text-center">
                  <div class="text-center">
                    <p>My email: {{ user.email }}</p>
                    <form class="background-style">
                      <div class="form-group">
                        <label class="font-weight-bold" for="change-email"
                          >*Enter my new email*</label
                        >
                        <input
                          type="text"
                          v-model="email"
                        />
                      </div>
                      <div class="form-group">
                        <div class="btn rounded p-1">
                          <button
                            class="rounded p-2"
                            @click.prevent="modifyMyprofil"
                          >
                           Modify my account
                          </button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>

                <div class="card-body mx-auto">
                  <div class="btn-danger rounded p-1">
                    <button class="rounded p-2" @click="deleteAccount">
                      Supprimer mon compte .
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
import axios from "axios";
import VueJwtDecode from "vue-jwt-decode";

export default {
  name: "ProfilConnect",
  data() {
    return {
      user: {},
      email: "",
    };
  },

  mounted() {
    axios.get("http://localhost:3000/api/profil/", {
      headers: {
        Authorization: "Bearer, " + localStorage.getItem("token"),
      },
    });

    try {
      let token = localStorage.getItem("token");
      let decoded = VueJwtDecode.decode(token);
      this.user = decoded;
    } catch (error) {
      console.log(error, "error from decoding token");
    }
  },
  methods: {
    modifyMyprofil() {
      axios
        .put(
          "http://localhost:3000/api/profil/",
          { email: this.email },
          {
            headers: {
              Authorization: "Bearer, " + localStorage.getItem("token"),
            },
          }
        )
        .then((response) => {
      
          console.log("Status: ", response.status);
          console.log("Data: ", response.data);
          console.log("Email: ", this.email);
        })
        .catch((error) => {
          
          console.error("Something went wrong!", error);
        });
    },

    deleteAccount() {
      axios
        .delete("http://localhost:3000/api/profil/", {
          headers: {
            Authorization: "Bearer, " + localStorage.getItem("token"),
          },
        })

        .then((response) => {
          this.$store.dispatch("logout").then(() => {
            this.$router.push("/");
            console.log(response);
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

// store/ vuex

export default createStore({
  state: {
    token: localStorage.getItem("token") || "",
    user: {}, 
  },

  getters: {
    isLoggedIn: (state) => !!state.token,
  },

  mutations: {
  

    auth_request(state) {
      state.status = "loading";
    },

    auth_success(state, token, user) {
      state.token = token;
      state.user = user;
    },

    auth_error(state) {
      state.status = "error";
    },
    logout(state) {
      state.status = "";
      state.token = "";
    },
  },

  actions: {
  

    submitLogin({ commit }, user) {
      return new Promise((resolve, reject) => {
        commit("auth_request");
        axios({
          url: "http://localhost:3000/api/auth/login",
          data: user,
          method: "POST",
        })
          .then((resp) => {
            const token = resp.data.token;
            const user = resp.data.user;
            localStorage.setItem("token", token);
            axios.defaults.headers.common["Authorization"] = "Bearer, " + token;
            commit("auth_success", token, user);
            resolve(resp);
          })
          .catch((err) => {
            commit("auth_error");
            localStorage.removeItem("token");
            reject(err);
          });
      });
    },

    logout({ commit }) {
      return new Promise((resolve, reject) => {
        commit("logout");
        localStorage.removeItem("token");
        delete axios.defaults.headers.common["Authorization"];
        resolve();
        reject();
      });
    },
  },
}); *