Files are in this sequence; Parent component, store and api file

personal-info.vue

<template>
  <form @submit.prevent="updatePersonalInfo" class="px-3 pt-3">
    <h2>PERSONAL INFORMATION</h2>
    <div class="form-group my-4">
      <div class="row">
        <div class="col-md-4 m-0">
          <label for="profile-pic" class="w-100">Change Profile Picture</label>
          <p class="description">Choose a new avatar to be used across Goodtalent</p>
        </div>
        <div class="col-md-4 m-0">
          <label for="profile-pic" class="avatar position-relative">
            <img
              style="border-radius: 50%; object-fit: cover"
              :src="payload.image ? payload.image : userAvatar"
              width="60"
              height="60"
              alt="Your Profile Picture"
            />
          </label>
          <input
            hidden
            type="file"
            class="form-control"
            id="profile-pic"
            accept="image/*"
            @change="previewImage()"
            ref="imageFileInput"
          />
        </div>
      </div>
    </div>
    <div class="form-group my-4">
      <div class="row">
        <div class="col-md-4 m-0 d-flex flex-column justify-content-center">
          <label for="full-name" class="w-100">Full Name</label>
          <!-- <p class="description">Lorem ipsum dior details loreytt phone number</p> -->
        </div>
        <div class="col-md-4">
          <label for="full-name" class="orange-label w-100">Full Name</label>
          <div class="form-input-wrapper">
            <input
              type="text"
              class="form-control text-capitalize"
              id="full-name"
              name="full-name"
              v-model="payload.name"
              required
            />
          </div>
        </div>
      </div>
    </div>
    <div class="form-group my-4">
      <div class="row">
        <div class="col-md-4 m-0 d-flex flex-column justify-content-center">
          <label for="email" class="w-100">Contact Email Address</label>
          <!-- <p class="description">Lorem ipsum dior details loreytt phone number</p> -->
        </div>
        <div class="col-md-4">
          <label for="email" class="orange-label w-100">Email Address</label>
          <div class="form-input-wrapper">
            <input
              type="email"
              class="form-control"
              id="email"
              name="email"
              v-model="payload.email"
              required
            />
          </div>
        </div>
      </div>
    </div>
    <div class="form-group my-4">
      <div class="row">
        <div class="col-md-4 m-0 d-flex flex-column justify-content-center">
          <label for="phone" class="w-100">Phone Number</label>
          <!-- <p class="description">Lorem ipsum dior details loreytt phone number</p> -->
        </div>
        <div class="col-md-4">
          <label for="phone" class="orange-label w-100">Phone Number</label>
          <phone-number-input
            v-model="payload.phoneNumber"
            :value="payload.phoneNumber"
            :placeholder="``"
          />
        </div>
      </div>
    </div>
    <!--
    <div class="form-group my-4">
      <div class="row">
        <div class="col-md-4 m-0 d-flex flex-column justify-content-center">
          <label for="website" class="w-100">Title</label>
    -->
    <!-- <p class="description">Lorem ipsum dior details loreytt phone number</p> -->
    <!--   </div> -->

    <!--
        <div class="col-md-4">
          <label for="website" class="orange-label w-100">Title</label>
          <div class="form-input-wrapper">
            <input
              list="roles"
              v-model="payload.talentRole"
              class="form-control d-flex align-items-center justify-content-center"
              required
            />
            <datalist id="roles">
              <option :value="role.name" v-for="(role, i) in roles" :key="i"></option>
            </datalist>
          </div>
        </div>
     

      </div> 
    -->
    <!--Personal Bio here -->
    <div class="bio px-3 mt-5">
      <h2>PERSONAL BIOGRAPHY</h2>

      <textarea
        class="w-100 p-2"
        v-model="payload.personalBio"
        rows="3"
        @blur="spellCheckStatus = false"
        @focus="spellCheckStatus = true"
        :spellcheck="spellCheckStatus"
        @input="fitBioContent()"
        placeholder="Tell us about yourself"
        ref="bio"
      ></textarea>
    </div>

    <div class="row">
      <div class="col-md-4"></div>
      <div class="col-md-4">
        <div class="mt-2">
          <button type="submit" class="primary">SAVE CHANGES</button>
        </div>
      </div>
    </div>
  </form>
</template>

<script>
import userAvatar from "../../assets/img/gt-avatar.svg";
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      userAvatar,
      payload: {
        name: "",
        email: "",
        phoneNumber: "",
        // talentRole: "",
        imageFile: null,
        phoneNumber: "",
        personalBio: "",
      },
      spellCheckStatus: false,
      loading: false,
      roles: [],
    };
  },
  computed: {
    ...mapGetters("profile", ["USER"]),
    ...mapGetters("authentication", ["LOGIN_TALENT"]),
  },
  methods: {
    async previewImage() {
      this.payload.imageFile = this.$refs.imageFileInput.files[0];
      this.payload.image = await URL.createObjectURL(
        this.$refs.imageFileInput.files[0]
      );
      // console.log(this.$refs.imageFileInput.files[0]);
      // this.payload.image = this.$refs.imageFileInput.files[0];
    },
    async fetchRoles() {
      this.loading = true;
      await this.$api.fetchRoles().then((response) => {
        if (response.status) {
          this.roles = response.data;
        }
        this.loading = false;
      });
    },

    async fetchCurrentBio() {
      this.loading = true;
      await this.$api.fetchRoles().then((response) => {
        if (response.status) {
          this.roles = response.data;
        }
        this.loading = false;
      });
    },

    fitBioContent() {
      this.$refs.bio.style.height = "";
      this.$refs.bio.style.height = this.$refs.bio.scrollHeight + "px";
    },

    ...mapActions("profile", ["UPDATE_PERSONAL_PROFILE"]),
    updatePersonalInfo() {
      this.loading = true;
      this.UPDATE_PERSONAL_PROFILE(this.payload)
        .then(this.successToast)
        .catch(this.failedToast)
        .finally(() => (this.loading = false));
    },

    successToast(response) {
      this.$toast.success(response.message);
    },
    failedToast(error) {
      this.$toast.error(error);
    },
  },
  created() {
    this.fetchRoles();
  },
  mounted() {
    this.fitBioContent();
    let { name, email, phoneNumber, personalBio, image } = JSON.parse(
      JSON.stringify(this.USER)
    );
    this.payload = { name, email, personalBio, phoneNumber, image };
  },
};
</script>

<style scoped>
.avatar:before {
  position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 20px;
  left: 0;
  text-align: center;
  z-index: 80;
  border-radius: 50%;
  cursor: pointer;
  content: url("~assets/img/camera.svg");
  background: #0000002b;
}

h2 {
  font-size: 16px;
  line-height: 19px;
  font-weight: 200;
  letter-spacing: 0.4px;
  color: #c85310;
  text-transform: uppercase;
  position: relative;
}

h2:before {
  position: absolute;
  width: 14px;
  height: 8px;
  left: -41px;
  top: 5px;
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
  content: "";
  background: var(--main-color);
}

p.description {
  font-size: 14px;
  line-height: 150%;
  letter-spacing: 0.2px;
  color: #767676;
  margin: 0;
}

label {
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 0.2px;
  font-weight: 300;
  color: #160901;
}

label.orange-label {
  font-size: 12px;
  line-height: 120%;
  color: #c85310;
}

button {
  width: 70%;
  font-family: "Proxima Nova", sans-serif;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-radius: 2px;
  color: #ffffff;
}

.form-control,
#telephone {
  border: 1px solid #f2eae5;
  border-radius: 2px;
  font-weight: 200;
}
textarea {
  font-size: 16px;
  line-height: 160%;
  letter-spacing: 0.4px;
  color: #000000;
  font-weight: 200;
  border-color: #f2f2f2;
}

textarea:focus {
  border-color: var(--main-color);
  box-shadow: 0;
  box-shadow: none;
  outline: none;
  padding: 10px;
}
</style>

profile-api.js

var FormData = require('form-data');
export default ($axios) => ({
    changePassword(payload, staffId) {
        // let token = payload.token;
        // delete payload.token;

        if (staffId)
            return $axios.$post(route.CHANGE_PASSWORD, payload, {
                // headers: { Authorization: `Bearer ${token}` },
                // params: { staffId },
            });
        else
            return $axios.$post(route.CHANGE_PASSWORD, payload, {
                // headers: {
                //     'Authorization': `Bearer ${token}`
                // }
            });
    },

    async updateCompanyProfile(payload, staffId) {
        if (payload.imageFile) {
            let image = payload.imageFile,
                imageUrl = ' ';
            await this.uploadImage({ image }).then((response) => {
                if (response.status) {
                    Promise.resolve('Image Uploaded');
                }
            });
        }

        delete payload.imageFile;
        if (staffId)
            return $axios.$post(route.UPDATE_COMPANY_PROFILE, payload, {
                params: { staffId },
            });
        else return $axios.$post(route.UPDATE_COMPANY_PROFILE, payload);
    },

    async updateAgencyProfile(payload) {
        if (payload.imageFile) {
            let image = payload.imageFile,
                imageUrl = ' ';
            await this.uploadImage({ image }).then((response) => {
                if (response.status) {
                    Promise.resolve('Image Uploaded');
                }
            });
        }
        delete payload.imageFile;
        return $axios.$post(route.UPDATE_AGENCY_PROFILE, payload);
    },

    async updateTalentProfile(payload) {
        let token = payload.token;
        console.log(payload)
        if (payload.imageFile) {
            let image = payload.imageFile,
                imageUrl = ' ';
            delete payload.imageFile;
            await this.uploadImage({ image }).then((response) => {
                if (response.status) {
                    Promise.resolve('Image Uploaded');
                }
            });
        } else if (payload.resumeFile) {
            let resume = payload.resumeFile;
            delete payload.resumeFile;
            await this.uploadResume({ resume }).then((response) => {
                if (response.status) {
                    Promise.resolve('Resume Uploaded');
                }
            });
        }
        // Just in case, thanks Dike
        delete payload.image;
        delete payload.resume;
        return $axios.$post(route.UPDATE_TALENT_PROFILE, payload, {

        });
    },

    fetchRoles() {
        return $axios.$get(route.FETCH_ROLES);
    },
    updateTalentSkills(payload) {
        let skills = payload.skills
        return $axios.$post(route.UPDATE_SKILLS, { skills });
    },
    fetchSkills() {
        return $axios.$get(route.FETCH_SKILLS);
    },

    uploadImage(payload) {
        const formData = new FormData();
        formData.append('files', payload.image);
        return $axios.$post(route.UPLOAD_IMAGE, formData);
    },
    updatePersonalProfile(payload) {
        let token = payload.token;
        console.log(payload)
        if (payload.imageFile) {
            let image = payload.imageFile,
                imageUrl = ' ';
            delete payload.imageFile;
            this.uploadImage({ image }).then((response) => {
                if (response.status) {
                    Promise.resolve('Image Uploaded');
                }
            });
        } else if (payload.resumeFile) {
            let resume = payload.resumeFile;
            delete payload.resumeFile;
            this.uploadResume({ resume }).then((response) => {
                if (response.status) {
                    Promise.resolve('Resume Uploaded');
                }
            });
        }

        // Just in case, thanks Dike
        delete payload.image;
        delete payload.resume;
        return $axios.$post(route.UPLOAD_PERSONAL_PROFILE, payload, {

        });
    },

    uploadResume(payload) {
        const formData = new FormData();
        formData.append('files', payload.resume);

        return $axios.$post(route.UPLOAD_RESUME, formData);
    },
    updateJobStatus(payload) {

        return $axios.$post(route.UPDATE_JOB_STATUS, payload);
    }
});
let profile = `/profile`;
var route = {
    CHANGE_PASSWORD: `${profile}/change-password`,
    UPDATE_COMPANY_PROFILE: `${profile}/update-profile/company`,
    UPDATE_AGENCY_PROFILE: `${profile}/update-profile/agency`,
    UPDATE_TALENT_PROFILE: `${profile}/update-profile/talent`,
    UPLOAD_PERSONAL_PROFILE: `${profile}/update/personal-info`,
    FETCH_ROLES: `${profile}/roles`,
    UPDATE_SKILLS: `${profile}/update-profile/talent`,
    UPDATE_JOB_STATUS: `${profile}/change-status`,

    // FETCH_SKILLS: `${profile}/skills`,
    FETCH_SKILLS: `${profile}/user-profile`,
    UPLOAD_IMAGE: `${profile}/upload-image`,
    UPLOAD_RESUME: `${profile}/upload-resume`,
};

profile-store.js

import Cookie from 'js-cookie'
import { errorHandler } from "./helpers";
const defaultState = () => ({
    token: "",
    user: {}
});
export default {
    state: defaultState(),
    getters: {
        token: state => state.token,
        USER: state => state.user,
    },
    mutations: {
        SET_USER_MUTATION(state, payload) {
            state.user = payload;
            Cookie.set('GOOD_TALENT_USER_ID', payload._id)
        },
        setUserToken(state, payload) {
            state.token = payload;
            Cookie.set('GOOD_TALENT_USER_TOKEN', payload)
        },

        RESET_STATE(state) {
            Object.assign(state, defaultState());
        }
    },
    actions: {
        async CHANGE_PASSWORD({ commit, rootGetters }, payload) {
            let staffId = "";
            if (rootGetters["profile/USER"].staff) staffId = rootGetters["profile/USER"]._id;
            return await this.$api

                .changePassword(payload, staffId)
                .then(response => {
                    if (response) {
                        commit("setUserToken", payload.token);
                    }
                    return Promise.resolve(response);
                })

            .catch(errorHandler);
        },
        async UPDATE_COMPANY_PROFILE({ commit, rootGetters }, payload) {
            let staffId = "";
            if (rootGetters["profile/USER"].staff) staffId = rootGetters["profile/USER"]._id;
            return await this.$api
                .updateCompanyProfile(payload, staffId)
                .then(response => {
                    if (response.status) {
                        commit("SET_USER_MUTATION", response.data);
                    }
                    return Promise.resolve(response);
                })
                .catch(errorHandler);
        },
        async UPDATE_AGENCY_PROFILE({ commit }, payload) {
            return await this.$api
                .updateAgencyProfile(payload)
                .then(response => {
                    if (response.status) {
                        commit("SET_USER_MUTATION", response.data);
                    }
                    return Promise.resolve(response);
                })
                .catch(errorHandler);
        },
        async UPDATE_TALENT_PROFILE({ commit }, payload) {
            return await this.$api
                .updateTalentProfile(payload)
                .then(response => {
                    console.log(response.data)
                    if (response.status) {
                        commit("SET_USER_MUTATION", response.data);
                    }
                    return Promise.resolve(response);
                })
                .catch(errorHandler);
        },

        async UPDATE_PERSONAL_PROFILE({ commit }, payload) {
            return await this.$api
                .updatePersonalProfile(payload)
                .then(response => {
                    console.log(response.data)
                    if (response.status) {
                        commit("SET_USER_MUTATION", response.data);
                    }
                    return Promise.resolve(response);
                })
                .catch(errorHandler);
        },

        async UPDATE_TALENT_SKILLS({ commit }, payload) {
            return await this.$api
                .updateTalentSkills(payload)
                .then(response => {
                    console.log(response.data.skills)
                    if (response.status) {
                        commit("SET_USER_MUTATION", response.data);
                    }
                    return Promise.resolve(response);
                })
                .catch(errorHandler);
        },
        async FETCH_USER_PROFILE({}, payload) {
            return await this.$api
                .fetchUser(payload)
                .then(response => Promise.resolve(response))
                .catch(errorHandler);
        },
        async TOGGLE_DISABLE_USER({}, payload) {
            return await this.$api
                .toggleDisableUser(payload)
                .then(response => Promise.resolve(response))
                .catch(errorHandler);
        },
        RESET({ commit }) {
            commit("RESET_STATE");
        },

        async UPDATE_JOB_STATUS({ commit }, payload) {
            return await this.$api
                .updateJobStatus(payload)
                .then(response => {

                    // if (response.status) {
                    //     commit("SET_USER_MUTATION", response.data);
                    // }
                    return Promise.resolve(response);
                })
                .catch(errorHandler);
        },
    }
};