mdDialog binding transforms object into a [object Object]

I have a function that calls a mdDialog:

public deleteMediaAction(mediaItem: MediaModel): void {
    const templateType = this.mediaIsDeletable && !this.mediaIsDeleted ? 'delete-media' : 'show-deleted-media-information'
    const template = `<${templateType}
        media-item="${mediaItem}"
        on-delete="vm.deleteMedia()"
        ></${templateType}>`;

    this.$mdDialog
        .show({
            template,
            targetEvent: null,
            clickOutsideToClose: false
        })
        .then(() => {
            this.deleteMedia();
        });
    console.log(mediaItem);
}

The console.log here shows there correct object:

blobId: "c06c1430-0b02-ea11-8113-00155d168404"

fileName: "zav + deleted info.msg"

extension: ".msg"

size: 9

id: "48501ff7-1602-ea11-8113-00155d168404"

Then in the <delete-media> component:

@Component('Project', {
    selector: 'delete-media',
    templateUrl: '/AttachmentListComponent/deleteMedia.html',
    bindings: {
        mediaItem: '@',
    }
})

    private mediaItem: MediaModel;

    $onInit() {
        console.log(this.mediaItem);
    }

The $onInit logs a

[object object]

What's going on? Why is the mediaItem object being transformed into something else?