Two-way binding fails when bound to a sub-property when property is named component.

[taylorzane]

Example

{{ component.name }} <!-- Simply to show that component.name fails to update. -->
<input bind:value="component.name"/>

<script>
export default {
  data () {
    return {
      component: {
        name: "world"
      }
    }
  }
}
</script>

<input>
REPL example

<select>
REPL example

---

Explanation

The initial render will work successfully, but when you attempt to change the value of component.name via the input, component.name does not update.

This seems to be caused by the $X_change_handler getSetter method using the name of the variable, without checking to see if it's been used before.

It seems like this would need multiple changes in order to get working.

Changes would need to be made to generators/dom/visitors/shared/binding/getSetter.js and utils/flattenReference.js (possibly others as I haven't fully investigated all locations) in order for name and keypath to be the correct.

It doesn't seem possible for this issue to be resolved by renaming the render_main_fragment argument component as any other name could, in theory, be used.

Workaround

Don't use component as a property name, currently using _component 😉

[Rich-Harris]

released 1.17 FYI — thanks