After struggling with an unexpected mutation prop issue in a child component for quite some time, I stumbled upon this insightful quote:
"When you have a component that receives an object through a prop, the parent is the one controlling that object, if you update it inside the child you break the synchronization of the state."
It dawned on me that my code lacked modularity and required refactoring to streamline future development.
In my (relatively simple) project, there's an app.vue file containing a v-data-table and a button that triggers a dialog for adding a new entry. All interactions are linked to a database using Axios. Initially, everything was packed into a single file.
I managed to move CRUD commands (and another function) to a separate component file named methods.js. Progress looked promising until I encountered challenges with the new entry dialog... The v-models in v-text-fields within methods.js were bound to attributes of the new object still residing in the main file, leading to errors like:
Error: Unexpected mutation of "newException" prop.
So, my question is: What's the best approach for clean code and modularity? Should I relocate the new object setup to the new dialog.vue instead of keeping it in app.vue? Furthermore, should each component have its own separate "component".js file rather than being clustered together?
Any insights would be greatly appreciated! <3