Vue.set is the way to go here, which used to be more prominent in the docs. The section that called this out (along with other reactivity "gotchas") has apparently been removed from the latest version.

Here's an archive link: http://web.archive.org/web/20170711045330/https://vuejs.org/...

They moved it. It's under List Rendering now in the guide. I have no idea why. https://vuejs.org/v2/guide/list.html#Object-Change-Detection...

The problem is, Vue.set is documented exactly nowhere in the getting started guide[0]. In my case, I couldn't use it because I wasn't the one modifying the data binder, d3-force was. But either way, this should definitely be in the guide !

Besides, it's possible for the new property to be picked up through Proxy Objects[1]. So it's not like it's entirely impossible for Vue to do this, they just chose not to (and they probably have good reason, like IE support).

[0]: https://vuejs.org/v2/guide/index.html

[1]: https://caniuse.com/#feat=proxy

I spend a good amount a time answering questions in the Vue StackOverflow tags. While this is documented, it's nevertheless something a huge amount of people stumble over. I'd say the change detection caveats are right behind "this" issues (which isn't really a Vue issue, just javascript) in terms of the most common problems I see in Vue code.

> I mean, how exactly did you think your new property would be picked up?

If mutations of existing properties are picked up, one could naturally expect that addition of new properties would also be.

Thanks for the hint. This will help me in my own project.

One question: Which objects will Vue attach observers to? Just props and data? I sometimes reference objects in Computed values, but those objects never seem to force re-rendering when they're changed.