[Vuejs]-Axios – [Object Promise] when loading data from API call

Why dont you just put it in an created() hook like:

data: function () {
 return {
      citizenselected: {CName : b} //returns [object Promise] instead of string
    };
},
created() {
    getCitizen(this.$route.params.citizen_id, this.$route.params.citizen_name).then(res => {
       this.citizenselected.CName = res;
    });
}

Is there an reason that you put your methods outside of your vue instance?

You need to return a promise from your getData function. You can either do that explicitly, or with then syntax.

// not async, then syntax
function getData(id, name)
{
  try {
    axios({
         url: 'http://localhost:44375/api/citizen/GetCitizenById',
         method: 'get',
         timeout: 8000,
         headers: {
             'Content-Type': 'application/json',
         },
         params: 
         {
          citizen_id: id, 
          citizen_name: name
         }
     }).then((res) => {
           if (res.status == 200) {
             console.log(res.status)
           }
           return res.data;
        });
 }
 catch (err) {
     console.error(err);
 }

}

//explicit promise, async
async function getData(id, name)
{
  try {
    let res = await axios({
         url: 'http://localhost:44375/api/citizen/GetCitizenById',
         method: 'get',
         timeout: 8000,
         headers: {
             'Content-Type': 'application/json',
         },
         params: 
         {
          citizen_id: id, 
          citizen_name: name
         }
     })
     if(res.status == 200){
         // test for status you want, etc
         console.log(res.status)
     }    
     // Don't forget to return something  
     return new Promise((resolve) => {resolve(res.data)});
 }
 catch (err) {
     console.error(err);
 }

}