Writing maintainable code is hard.
It's hard to learn, and even harder to teach.
Mostly, it's won through hard work and experience.
But there are a few guidelines I've learned over the years that can get you there quicker.
I've written about side effects before, but here's a quick refresher:
They're terrible.
...but necessary.
They are responsible for a huge amount of the complexity in your application, so you want to reduce their effect as much as possible.
But you also can't get rid of them completely. Without side effects your application wouldn't do anything interesting.
Side effects are anything that changes state outside of it's immediate scope. If you have a function that does some calculations and keeps track of the intermediate values, that's not a side effect.
However, if that function is updating the state of the entire component, now it becomes a side effect.
Before I mentioned complexity, and here's why:
If your state is being updated all over the place, it's hard to keep track of what's going on. When you have a bug, it's really difficult to figure out where to look.
Less side effects = more understandable code.
Mmmm, my favourite feature in Vue.
Almost as good as a nicely steeped cup of Orange Pekoe tea.
You can never have too many computed props in your Vue components. If you convert parts of your component to use computed props, it magically cleans up your code.
Okay, it's not exactly magic.
But there are probably props and state in your component that don't actually need to be there. Instead you can derive them from other props and state.
Use a computed prop to calculate them, and it's one less thing you need to worry about.
When I was a kid, me and my best friend spent a lot of time smashing rocks.
It was fascinating to see how they broke apart. It seemed like they "wanted" to break apart in a certain way.
All code is like this too.
There are certain seams that run through the code, natural places where the code "wants" to be split apart. Like a shirt that has several pieces stitched together, your components have these seams.
Try to find them.
It's the easiest way to split a large component into smaller ones.