Polymer 2 update paper-listbox item

I have a collection of objects which have a name property. For editing these objects I have a paper-listbox that lists the names of the objects and lets the user select one of the objects by name. Next to the listbox I have a form with paper-inputs etc to edit properties of the selected object. One of the paper-inputs binds to the name property of the selected object so the user can change the name.

My problem is that the changes to the name property are not reflected to the listbox. How do I update the listbox after the user has changed the name?

I confirmed that the name change actually happens because when I change to another object and back to the previous one the changed name is still there. The problem is just that the listbox does not update.

I tried something like:

this.notifyPath("myObjects")

but that doesn't do anything.

The paper-listbox is created like this

<paper-listbox selected="{{selectedObjectIndex}}">
    <template is="dom-repeat" items="[[myObjects]]">
        <paper-item>[[item.name]]</paper-item>
    </template>
</paper-listbox>

selectedObjectIndex has an observer that sets the selected object

selectedPageIndexChanged(newValue, oldValue) {
    ...
    this.selectedObject = this.myObjects[this.selectedObjectIndex];
}

Solution

Here below some working and not working examples. (I tried to illustrate the code at codepen as show DEMO, here also part of the code in order to quick inspection.

 <paper-listbox selected="{{selectedObjectIndex}}">
  <template is="dom-repeat" items="{{myObjects}}" >
    <paper-item>[[index]].[[item.name]]</paper-item> <br/>
  </template>
 </paper-listbox>
 <paper-input value="{{selectedObject.name}}" ></paper-input>

....

     selectedObjectIndex:{
           type:Number,
           observer:'selectedPageIndexChanged'
         }
      }} 
      static get observers() {return ['nameValueChanged(selectedObject.name)']}
      constructor() {
            super();
       }

       ready() {
            super.ready();

        }

  selectedPageIndexChanged(newValue, oldValue) {

      this.selectedObject = this.myObjects[newValue];
  }
 nameValueChanged(name){
      //this.myObjects[this.selectedObjectIndex].name = name;
      //this.set('myObjects.' + this.selectedObjectIndex + ".name", name ) // --> Does not work
      this.set('myObjects.' + this.selectedObjectIndex, { name: name} ) // --> Works
      // this.splice('myObjects', this.selectedObjectIndex,1, this.selectedObject) -- Does not work

      //this.notifyPath('myObjects.' + this.selectedObjectIndex + ".name") // -- works (with one of above)

 }
}

The above signed Does not work lines changes the object but not observable at dom-repeat