Computed property in model with belongsTo returns undefined

I have 3 models.

// Product
export default DS.Model.extend({
    content: DS.attr('string'),
    creator: DS.belongsTo('user')
});

// User
export default DS.Model.extend({
    email: DS.attr('string'),
    products: DS.hasMany('product'),
    person: DS.belongsTo('person'),
    fullName: Ember.computed(function() {
        return `${this.get('person.firstname')} ${this.get('person.surname')}`;
    })
});

// Person
export default DS.Model.extend({
    firstname: DS.attr('string'),
    surname: DS.attr('string'),
    users: DS.hasMany('user')
});

I try to use this in handlebars.

As you can see there is a computed property in the User model. But it returns always undefined undefined because this.get('person.firstname') and this.get('person.surname') return undefined.

The Ember inspector shows data for each model. Any idea how to fix this?