json response renders undefined in console, vue.js

I have a simple vue.js app where I am trying to print out some text with typescript. The json response looks like.

{
"data": [
{
"firstName": "Foo",
"lastName": "Smith"
},
{
"firstName": "Mike",
"lastName": "vue"
},
{
"firstName": "go",
"lastName": "lang"
}
],
"metadata": "none"
}

typescript

export interface TestResponse {
firstName:string;
lastName:string;
}

axios call

const request: AxiosInstance = axios.create({
baseURL: url.baseUrl,
headers: {
'content-type': 'application/json',
},
//params: {base64_encoded: 'true', fields: 'stdout'},
});
export const api = {
async getTest() {
try{
return await request.get<TestResponse>("/v1/test")
.then(res => {
console.log("lastname " + res.data.lastName);
return res.data
})
}catch (err) {
console.log("error" + err);
}
},
}

However here it always renders undefined. I tried to TestResponse[] and Array<TestResponse> with no avail.

This should be giving me an array but I get

Cannot read properties of undefined (reading 'data')

export default {
name: "Test",
setup() {
const firstName = ref('');
const lastName = ref('');
const submit = async () => {
try {
const response = await api.getTest()
if (response != null) {
firstName.value = response[0].data.firstName
lastName.value = response[0].data.lastName
console.log("I am a name " + response.lastName)
}
} catch (error) {
console.log('Error while getting the response:', error)
}
}
return {
firstName,
lastName,
submit
}
},
};

I see two issues, first the type of your response object, second the way you execute your request.

About the response object, the content of the response body is located in res.data but it seems your API also return a field data, so you might need to do res.data.data or update the body returned by your API.
Based on your example json response, the correct Typescript type would be:

export interface TestResponse {
  firtName: string
  lastName: string
}

export interface TestResponseRO {
  data: TestResponse[]
  metadata: string
}

If you use await, you do not need to use .then, you should instead do the following

async getTest() {
  try {
    const res = await request.get<TestResponseRO>("/v1/test");

    console.log(res.data) // Should display '{"data": [your array], "metadata": "none"}'

    return res.data 
  } catch (err) {
    console.error(err)
  }
}

If you still have an error, try to execute a request using curl or Postman to make sure your API is working well.

I also recommend you to use axios as HTTP client, it's more flexible than request in my opinion.