Vue3 data is null - axios

Question

I've created a small sample with vuejs3 to display some data.
I do have connection to the server. I had a CORS issue but have configured a proxy to access data from the client.
main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
App.vue
<template>
<div class="container mt-5">
<div class="row">
<div class="col-12">
<contract-data/>
</div>
</div>
</div>
</template>
<script>
import ContractData from "./components/ContractData.vue";
export default {
name: "App",
components: {
ContractData,
}
}
ContractData.vue
<template>
<table class="table">
<tr><td>Contract-Id</td><td>{{ contractData.id }}</td></tr>
</table>
</template>
<script>
import axios from 'axios';
export default {
name: "contract-data",
data() {
return {
contractData: null
};
},
async created() {
const response = await axios.get("http://localhost:8080/contract/123456");
console.log(response.data);
this.contractData = response.data;
}
};
</script>
The thing is: I see the json data returned in the console.log statement in the async block. However it seems that the assignement to contractData is not working.