Data-binding in <template> on objects attributes have strange behaviour [bug?]

[silentHoo]

Suppose we have the following components <template> code:

<polymer-element name="my-microphone-list">
<paper-radio-group selected="{{ selected.microphoneNumber }}">
  <template repeat="{{ device, index in devices.microphones }}">
    <paper-radio-button
      name="{{ device.id }}"
      label="Microphone {{ index + 1 }}">
    </paper-radio-button>
  </template>
</paper-radio-group>
<polymer-element>

The selected object has an integer value microphoneNumber which indicates the current selected microphone in the given list of microphones. selected.microphoneNumber will change in the components JavaScript code.

When I append my-microphone-list multiple times, everytime I select a radio button in one group, all the other groups will also select the same paper-radio-button. That's strange because selected is NOT a shared variable. When I replace selected.microphoneNumber with a simple variable it works like a charm.

Could someone please explain why this happens?

PS: Here's the code: http://jsfiddle.net/6sqo159z/18/

[silentHoo]

Ok, it seems that I'm in trouble with the "shared state" as mentioned in the Polymer API Guide which tells Important: For properties that are objects or arrays, you should always initialize the properties in the created callback. If you set the default value directly on the prototype (or on the publish object), you may run into unexpected “shared state” across different instances of the same element.

// Good!
Polymer('x-foo', {
  created: function() {
    this.list = []; // Initialize and hint type to be array.
    this.person = {}; // Initialize and hint type to an object.
  }
});

// Bad.
Polymer('x-foo', {
  list: [], // Don't initialize array or objects on the prototype.
  person: {}
});

See below these anchor link: https://www.polymer-project.org/docs/polymer/polymer.html#configuring-an-element-via-attributes