Vue component gets prop only if data attributes not set

I need help. I'm kind of an amateur in Vue3, and can´t understand why this happens:

If I set this in the parent component:

props: [ 'code' ],    
data() {
    return {
        asset: {
            id: '',
            brand: '',
            group: {
                name: '',
                area: ''
            }
        }
    }
},
created() {
    axios.get('/api/myUrl/' + this.code, {})
        .then(response => {
            if (response.status === 200) {
                this.asset = response.data;
            }
        })
        .catch(error => {
                console.log(error);
        })
}

then, in my component <asset-insurance :asset_id="asset.id"></asset-insurance>, asset_id prop is empty.

But, if I set:

props: [ 'code' ],
data() {
    return {
        asset: []
    }
},
created() {
    axios.get('/api/myUrl/' + this.code, {})
        .then(response => {
            if (response.status === 200) {
                this.asset = response.data;
            }
        })
        .catch(error => {
            console.log(error);
        })
}

then, the asset_id prop gets the correct asset.id value inside <asset-insurance> component, but I get a few warnings and an error in the main component about asset property group.name not being set (but it renders correctly in template).

Probably I'm doing something terribly wrong, but I can't find where is the problem. Any help?

Edit:

I'm checking the prop in child component AssetInsurance just by console.logging it

<script>
export default {
    name: "AssetInsurance",
    props: [
        'asset_id'
    ],
    created() {
        console.log(this.asset_id)
    }
}
</script>

asset_id is just an integer, and is being assigned correctly in parent's data asset.id, because I'm rendering it in the parent template too.