Vue: Firefox - changing anything on element via $refs table breaks the binding

[furai]

Version

2.5.15

Reproduction link

• https://gist.github.com/furai/a35ac09836adaf3d291ed5364330d1d4
• jsfiddle

Steps to reproduce

1. Create vue.js instance and add data field to it.
2. Create new "title" property.
3. In your app create any element and output in it your "title".
4. Add ref to your element.
5. Change "title" in your app using some method.
6. Change "title" via $refs table.
7. Change back "title" via your method.

What is expected?

Your "title" should change back to what was set by your method.

What is actually happening?

Title can't be changed anymore by your method. Vue is losing the binding to the element after it's updated via $refs.

---

This happens only on Firefox (I'm using 60.0b2), other browsers (chrome, chromium) are fine.

[yyx990803]

This is because when you set innerText, it throws aways the current TextNodes inside the element and creates new ones. However, Vue is still holding on to the TextNodes for subsequent updates.

Note it's not recommended to mutate nodes via refs unless you absolutely need to. That said, to change the text without replacing the text nodes, use

vm1.$refs.heading.childNodes[0].data = 'Something else';

[furai]

But why then it happens only in Firefox and not in Chrome?