Cannot set Axios properly with Vue 2 and Nuxt - vue.js

Question

I am quite new to vue.js, using vue 2 and nuxt.js. I am trying to build an authentication in a website. There is a backend api running in local.
I have a form that receives my user's data. The data is then stored in the store using vuex. I want to make a POST Api call using axios, which retrieves the data stored from the store to the API running localy.
Unfortunately, I cannot get axios to run this properly...
It seems that the sendData function cant have access to the store. I tried many things : this.$store.user, this.user, $store...
Thanks a lot for your help!
4th Component
<template>
<form class="form-horizontal" >
<!-- firstname input-->
<div class="field">
<label class="label" for="contact_first_name">Prénom</label>
<div class="control">
<input id="contact_first_name" name="contact_first_name" type="contact_first_name" placeholder="Prénom" class="input " required="" v-model="companycontact.contact_first_name">
</div>
</div>
<!-- name input-->
<div class="field">
<label class="label" for="contact_last_name">Nom</label>
<div class="control">
<input id="contact_last_name" name="contact_last_name" type="contact_last_name" placeholder="Nom" class="input " required="" v-model="companycontact.contact_last_name">
</div>
</div>
<!-- service choice -->
<div class="field">
<label class="label" for="Service">Service</label>
<div class="control">
<div class="formfield-select">
<select id="service-choice" name="service-choice" class="input" v-model="companycontact.contact_service">
<option v-for="(service, index) in services" :key="index" :value="service.value">
{{ service.text }}
</option>
</select>
</div>
</div>
<div class="next-back-button">
<nuxt-link to="/SignUpCompanyOnline" class="button is-rounded back-button" #click.native="saveStore()">Retour</nuxt-link>
<nuxt-link to="/SignUpCompanyIg" class="button is-rounded next-button" #click.native="saveStore(); sendData()">Suivant</nuxt-link>
</div>
</div>
</form>
</template>
<script>
export default {
name: 'SignUpCompanyContact',
data () {
return {
companycontact: {
contact_first_name: this.contact_first_name,
contact_last_name: this.contact_last_name,
services: this.services,
},
services: [
{ text: 'Communication', value: 'COM' },
{ text: 'Direction', value: 'DIR' },
{ text: 'Marketing', value: 'MAR' },
{ text: 'Autre', value: 'OTH' },
],
}
},
methods: {
saveStore() {
this.$store.commit('signUp/setContactServiceInsta', { companycontact: this.companycontact })
},
async sendData () {
// console.log(this.user.email)
// console.log(this.$store.user.email)
// console.log(user.email)
// console.log($store)
/* let data = {
email: this.user.email,
password: this.password,
nb_employees: this.numberemployee,
name: this.name,
insta_account: this.insta_account,
sale_type: this.option,
sector_type: this.sector,
website_url: this.website_url,
contact_first_name: this.contact_first_name,
contact_last_name: this.contact_last_name,
contact_service: this.contact_service
}
// console.log(data);
this.$axios.post('http://localhost:8000/api/companies/', data )
.then(response => console.log(response))
.catch(error => console.log(error.response)) */
}
}
}
</script>
<style>
.form-example {
padding-bottom: 20px;
}
.form-logo{
width: 30px;
height: 30px;
border-bottom:2px solid #D8D8D8;
}
input {
width: 300px;
}
input[placeholder] {
width: 300px;
}
/* contact firstname lastname */
input[type=contact_last_name] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid #D8D8D8;
background-image: url(../../assets/icons/user-lightgrey.svg);
background-size: 30px;
background-position-y: 4px;
background-repeat: no-repeat;
text-indent: 20px;
}
input[type=contact_last_name]:focus {
border-bottom: 2px solid #7F7F7F;
outline: none;
background-image: url(../../assets/icons/user-darkgrey.svg);
-webkit-box-shadow: 0px 14px 8px -8px rgba(0,0,0,0.40);
-moz-box-shadow: 0px 14px 8px -8px rgba(0,0,0,0.40);
box-shadow: 0px 14px 8px -8px rgba(0,0,0,0.40);
transition-duration: .3s;
border-radius: 1px;
}
input[type=contact_first_name] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid #D8D8D8;
background-image: url(../../assets/icons/user-lightgrey.svg);
background-size: 30px;
background-position-y: 4px;
background-repeat: no-repeat;
text-indent: 20px;
}
input[type=contact_first_name]:focus {
border-bottom: 2px solid #7F7F7F;
outline: none;
background-image: url(../../assets/icons/user-darkgrey.svg);
-webkit-box-shadow: 0px 14px 8px -8px rgba(0,0,0,0.40);
-moz-box-shadow: 0px 14px 8px -8px rgba(0,0,0,0.40);
box-shadow: 0px 14px 8px -8px rgba(0,0,0,0.40);
transition-duration: .3s;
border-radius: 1px;
}
/* service */
#service-choice {
padding-left: 20px !important;
margin: 8px 0;
box-sizing: border-box;
color: #4A4A4A !important;
border: 1px solid #fff !important;
border-bottom: 2px solid #D8D8D8 !important;
background-image: url(../../assets/icons/sector-lightgrey.svg);
background-size: 30px;
background-repeat: no-repeat;
text-indent: 20px;
outline: none !important;
}
#service-choice:focus {
border-bottom: 2px solid #7F7F7F;
outline: none;
color: #4A4A4A !important;
background-image: url(../../assets/icons/sector-darkgrey.svg);
border-radius: 1px;
}
/* submit button */
.submit-button {
text-decoration: none;
outline: none;
background-color: #00CC99;
border: 1px solid #00CC99;
font-size: 20px;
color: #fff;
font-weight: normal;
padding: 10px 20px;
margin-top: 40px;
font-family: 'Montserrat', sans-serif;
-webkit-box-shadow: 0px 0px 44px -9px rgba(0,0,0,0.40);
-moz-box-shadow: 0px 0px 44px -9px rgba(0,0,0,0.40);
box-shadow: 0px 0px 44px -9px rgba(0,0,0,0.40);
}
.submit-button:hover {
background-color: #fff;
border: 1px solid #00CC99;
color: #00CC99;
transition: background-color .3s;
}
/* next button / back button */
.next-back-button {
display: flex;
justify-content: space-evenly;
flex-direction: row;
width: 50%;
}
.next-button {
text-decoration: none;
outline: none;
background-color: #00CC99;
border: 1px solid #00CC99;
font-size: 20px;
color: #fff;
font-weight: normal;
padding: 10px 20px;
margin-top: 40px;
font-family: 'Montserrat', sans-serif;
}
.next-button:hover {
background-color: #fff;
border: 1px solid #00CC99;
color: #00CC99;
transition: background-color .3s;
}
.back-button {
text-decoration: none;
outline: none;
background-color: #ffffff;
border: 1px solid #D8D8D8;
font-size: 20px;
color: #D8D8D8;
font-weight: normal;
padding: 10px 20px;
margin-top: 40px;
font-family: 'Montserrat', sans-serif;
outline: none;
}
.back-button:hover {
background-color: #fff;
border: 1px solid #999999;
color: #999999;
transition: background-color .3s;
}
</style>
VUEX store :
export const state = () => ({
user: {},
company: {},
companydetails: {},
companycontact: {},
validationcode: {},
})
export const mutations = {
setEmailPassword(state, { user }) {
console.log(user)
state.user.email = user.email
state.user.password = user.password
},
setCompanyEmployeeInsta(state, { company }) {
console.log(company)
state.company.name = company.name
state.company.insta_account = company.insta_account
state.company.selected = company.selected
},
setWebsiteCanalSector(state, { companydetails }) {
console.log(companydetails)
state.companydetails.website_url = companydetails.website_url
state.companydetails.option = companydetails.option
state.companydetails.sector = companydetails.sector
},
setContactServiceInsta(state, { companycontact }) {
console.log(companycontact)
state.companycontact.contact_first_name = companycontact.contact_first_name
state.companycontact.contact_last_name = companycontact.contact_last_name
state.companycontact.contact_service = companycontact.contact_service
},
setValidationCode(state, { validationcode }) {
console.log(validationcode)
state.validationcode.contact_first_name = validationcode.contact_first_name
},
}