Why does the TreeVIew example on vuejs have a child component modify data passed in via a prop?

[aryeh]

Is there a reason why the Tree View example on the vuejs website https://vuejs.org/examples/#tree modifies data that was passed in as a property to the child, rather than using events or v-model?

As I understand it, this is an anti-pattern. Am I missing something?

Thanks.

[LinusBorg]

It usually is an anti-pattern, sure. Something usually being an antipattern doesn't mean you can't ever do it, or else...!!!

The TreeItem is a recursive component that render itself as its nested children. All of the interaction between the nested TreeItems is encapsulated in TreeItem.vue. So yes, you could go the extra mile and use events to be super-clean, but as this is not really an interaction between multiple different components, but rather one component interacting with itself, you can just mutate the data in place, it's simpler that way.