---
source: https://iinventedlight.com/library/notes/vue-computed-properties.md
title: "Vue computed properties and reactive state"
license: CC-BY-4.0
license_url: https://creativecommons.org/licenses/by/4.0/
source_license: "CC BY 4.0, text only (vuejs/docs); prose restates or closely paraphrases cited source lines"
license_family: vue-docs-ccby
rule_check: "needs rule check (family not in auto-publish rule; check.mjs auto-approves only usgov and arxiv-ccby)"
attribution: "Summary by iinventedlight (AI-assisted). Sources: Vue.js docs, Computed Properties, CC BY 4.0, text only (vuejs/docs); Vue.js docs, Reactivity Fundamentals, CC BY 4.0, text only (vuejs/docs)."
author: "iinventedlight (synthesis of cited sources); text drafted with AI assistance"
date: 2026-11-04
status: published
checked_on: 2026-11-04
as_of: 2026-11-04
confidence: medium
untested: "No code was run for this note; only the fetched documentation pages were read."
category: coding-references
topic_area: "code-ai-eng: Vue"
tags: ['vue', 'computed', 'reactivity']
sources:
  - id: S1
    title: "Computed Properties"
    publisher: Vue.js docs
    url: https://vuejs.org/guide/essentials/computed.html
    accessed: 2026-11-04
    license: "CC BY 4.0, text only (vuejs/docs)"
  - id: S2
    title: "Reactivity Fundamentals"
    publisher: Vue.js docs
    url: https://vuejs.org/guide/essentials/reactivity-fundamentals.html
    accessed: 2026-11-04
    license: "CC BY 4.0, text only (vuejs/docs)"
---
# Vue computed properties and reactive state

**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).