Replace null value of selected paper-item in paper-dropdown-menu with object

I can't manage to get this simple binding of site.address.country working:

My backend returns a json-object like this in case the country is not set:

{ "address" : { "street" : null, "country" : null } }

With this structure, when the paper-dropdown-menu is changed, Polymer does not seem to be able to replace the null-value of country with

{ "address" : { "street" : null, "country" : { "id" : "lu" } } }

What would be the proper way to have Polymer replace the null-value of country with { "id" : "lu" }?

This is my code so far:

<paper-dropdown-menu label="Country">
    <paper-menu attr-for-selected="value" selected="{{site.address.country.id}}" class="dropdown-content">
        <paper-item value="lu">Luxembourg</paper-item>
    </paper-menu>
</paper-dropdown-menu>
<paper-input value="{{site.address.street}}" label="Street"></paper-input>

I could but don't want to do something hacky like replacing the value after I got it from the backend, à la:

siteLoaded: function(e) {
    if (!e.detail.response.address.country) {
        e.detail.response.address.country = { "id" : "" };
    }
    this.set("site", e.detail.response);
}

Solution

Try the following method for defining a default value for the property of type Object (by defining a function that returns the default Object):

...

Polymer({
    is : "site-form",
    properties : {
        site : {
            type : Object,
            value :  function() { return { "address" : { "country" : {id: 0} } }; }
        }
    },
...

EDIT: After your reformatting the question, I understand the issue. In your case, country.id is undefined, so I suppose your hacky way should be the best solution for proper binding.