In various instances, it has been advised against mutating properties in vue.js, as it is considered an anti-pattern. Even mutating object properties or using functions like this.$set to add elements to an object that is given as a property is discouraged.
Given this, what is the correct way for a component to modify data it receives? While vue.js recommends emitting events as a pattern, consider this fictional scenario:
// Main Component
<template>
// content skipped for simplicity
<some-component :someObject="something" />
</template>
// SomeComponent
// Passes this data to another component
<template>
<another-component :someObject="someObject" />
</template>
// AnotherComponent
// Does things using someObjet
Let's say the third component, AnotherComponent, is responsible for displaying data passed down from the main UI and potentially passing it (or parts of it) to other components as well.
Does this mean that any component wanting to modify the data (e.g., a delete button in a list) must emit an event, which then all components in the hierarchy must listen for and pass up to the original component, the only one permitted to directly mutate the object?
Is there a more efficient method for accomplishing this?