Vue edit name of prop without losing functionality

So I am working to do a post with Vue and my REST API (spring boot). If I do this post from Postman I get what I want:

Now I wanted to this via my VUE project like this:

My Vue page:

<template>
  <div class="submit-form">
    <div class="form-group">
      <label for="coalition">Coalition Name</label>
      <input
          class="form-control"
          id="coalition"
          required
          v-model="coalition.name"
          name="coalition"
      />
    </div>


    <div class="form-group">
      <label for="date">Date</label>
      <input
          type="date"
          id="date"
          required
          v-model="coalition.date"
          name="description"
      />
    </div>

    <button @click="saveCoalition" class="btn btn-success">Submit</button>
    <p>{{message}}</p>

    <!--    <div>-->
    <!--      <button class="btn btn-success" @click="newParty">Add</button>-->
    <!--    </div>-->
  </div>
</template>

<script>
import CoalitionDataService from "../../services/CoalitionDataService";
import jwt_decode from "jwt-decode";
import HomeDataService from "../../services/HomeDataService";
export default {
  name: "AddCoalition",
  data() {
    return {
      coalition: {
        id: null,
        name: "",
        date: "",
        account:{
          id: ""
    },
      },
      message:""
    };
  },
  methods: {
    getUserId(){
      //Retrieve JSON WEB TOKEN
      try {
        var token = localStorage.getItem("Authorization")
        var decoded = jwt_decode(token);
        var username = decoded[Object.keys(decoded)[0]];
        HomeDataService.getId(username)
            .then(response => {
              this.account.id = response.data.id;
              console.log(this.account.id)
            })
      }
      catch (e){
        console.log("No user is logged in")
      }
      return this.account.id
    },
  saveCoalition() {
    var data = {
      name: this.coalition.name,
      description: this.coalition.description,
      date: this.coalition.date,
      account:{
        id: this.getUserId()
      },
    };

    CoalitionDataService.create(data)
        .then(response => {
          this.coalition.id = response.data.id;
          console.log(response.data);
          this.message = 'The Coalition was created successfully!';
        })
        .catch(e => {
          console.log(e);
        });
  },

  newParty() {
    this.coalition = {};
  }
}

}
</script>

But now I think the problem is my program does not distinguish account.id from id. How should I change it so that I can do the post like in the postman, but my program does not error on this.

The error

Thanks in advance!

Note

I saw that if I clicked my id from account like this: The other id gets highlighted as well like they are the same. Maybe this helps.