When to use method over computed property setter and vice versa?

Question

When using Vue.js, when should you use a method or a computed property setter? There seems to be little distinction in the documentation, or numerous articles. Usually articles present computed property setters as little more than a footnote.

Given that both methods and setters accept parameters, is there a particular reason you'd use one or the other? As far as I can see methods would be all you need.

Edit:

This is literally not a repost because the linked SO answer contains the word setter once and only in vague passing:

computed properties are converted into a property of the Vue with a getter and sometimes a setter.

Great, so how does this elaborate on the subject of this post, when to use a SETTER vs a method?

Answer 1

Computed properties are cached so they can benefit you when it comes to performance. They do not work like methods, as they do not accept arguments.

I use them mostly to modify existing data or make it easier to access nested data.

The part about caching is something that can end up being a hassle. They will always cache unless their direct dependencies change. Properties within computed properties that are within controls blocks will usually not update the computed property(not seen as a direct dependency).

This is something you need to be aware of.

When using things like large v-for lists you will want to to take advantage of the caching ability of computed properties since unlike with a method you won't have to perform the logic inside of it over and over, unless the direct dependencies of the computed property change.

Answer 2

Computed properties should be used to display data relative to existing data. While methods should be used to do an action and/or change data.