← All notes

Answer: For complex logic that includes reactive data, it is recommended to use a computed property. Computed properties are cached based on their reactive dependencies. (S1)

Why not put it in the template

• In-template expressions are very convenient, but they are meant for simple operations. (S1)
• Putting too much logic in your templates can make them bloated and hard to maintain. (S1)
• You can data-bind to computed properties in templates just like a normal property. (S1)

How computed works

• The computed() function expects to be passed a getter function, and the returned value is a computed ref. (S1)
• Computed refs are also auto-unwrapped in templates so you can reference them without .value in template expressions. (S1)
• As long as the dependencies have not changed, multiple accesses will immediately return the previously computed result without having to run the getter function again. (S1)
• Computed getter functions should only perform pure computation and be free of side effects. (S1)

The reactive state underneath

• With the Options API, we use the data option to declare reactive state of a component. (S2)
• Properties added directly to this without including them in data will not be able to trigger reactive updates. (S2)
• In Vue 3, data is made reactive by leveraging JavaScript Proxies. (S2)

Claims

• id: C1 claim: Computed properties are cached based on reactive dependencies. source: S1 evidence: "the difference is that computed properties are cached based on their reactive dependencies."
• id: C2 claim: computed() takes a getter and returns a computed ref. source: S1 evidence: "and the returned value is a computed ref."
• id: C3 claim: Computed getters should be free of side effects. source: S1 evidence: "Getters should be side-effect free ​"
• id: C4 claim: Vue 3 makes data reactive with JavaScript Proxies. source: S2 evidence: "In Vue 3, data is made reactive by leveraging JavaScript Proxies."

Sources

• [S1] Computed Properties. Vue.js docs. https://vuejs.org/guide/essentials/computed.html . License: CC BY 4.0, text only (vuejs/docs). Accessed 2026-11-04.
• [S2] Reactivity Fundamentals. Vue.js docs. https://vuejs.org/guide/essentials/reactivity-fundamentals.html . License: CC BY 4.0, text only (vuejs/docs). Accessed 2026-11-04.

License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted).

@misc{iil_note_0vj30m22,
  author = {{iinventedlight}},
  title = {{Vue computed properties and reactive state}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-04},
  url = {https://iinventedlight.com/library/notes/vue-computed-properties/},
  note = {Permanent ID iil:note:0vj30m22. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt. This page in Markdown: /library/notes/vue-computed-properties.md.