Objects as Vue properties & mutating the properties' properties

We had a huge debate at work about this and I would appreciate if the community could resolve our dillema. I’ve included a full example but the gist of it is:

Suppose we have object dataObject = { propertyName: 'propertyValue'} that is a data value of parent-component and we pass it into child-component by reference: <child-component :value="dataObject"/>. Can we, inside the child, have <input v-model="value.propertyName"> and expect reactivity to work?

My reasoning is that we’re actually firing setters defined on dataObject by the parent property and this actually enables the reactivity. Mind you, we’re NOT mutating the child’s value itself here, we fully understand that would not work (as if properties were passed by value, not by reference). Our simplified code seems to work without any problems. This Stack Overflow question also seems to say we are not doing anything wrong, but we don’t want to trust a random SO answer :slight_smile:

Background: we’re using Vue 2 with Nuxt without VueX (for now at least). We have a fairly big, but flat, data model coming from the backend server for the user to edit and would like to split its editing among smaller components.

We are now doing some ‘interesting’ work to avoid mutating component properties’ properties directly because Vue documentation says so, but our properties are objects and we found several hints in the documentation that this may not be neccessary at all and that we could just drop these ‘interesting’ additions. They have caused us quite some work and we’ve introduced some bugs where reactivity did break. We solved the bugs but if we could avoid the complexity that would be a huge benefit.

I think it really comes down to your team and what kind of style guide/linting rules you’re following. Some teams will enforce that absolutely no object props should ever be mutated directly, for others this isn’t seen as an issue and therefore acceptable.

What it comes down to is predictability. If your team understands the possible side effects of mutating object props directly then you should be able to reliably predict any possible issues when doing so.

I’d say Vue’s documentation leans towards immutable because of new comers to the framework - immutability being a much safer approach when dealing with undesired side effects. I’ve seen many cases where people mutate objects and have unwanted side effects because they don’t understand the referential nature of JS objects and then complain about bugs in Vue.