Computed properties for derived state, watchers for side effects

In-template expressions are meant for simple operations; for complex logic involving reactive data, declare a computed property — via the computed option in the Options API, or computed() returning a computed ref in <script setup> — and data-bind to it in the template like a normal property. Unlike invoking a method, which always runs the function on every re-render, a computed property is cached based on its reactive dependencies and only re-evaluates when one of them changes; a computed reading Date.now() will never update, because Date.now() is not a reactive dependency. In cases where you do not want caching, use a method. Two best practices: computed getters should perform pure computation and stay free of side effects — do not mutate other state, make async requests, or mutate the DOM inside a getter — and a computed return value is derived state, a temporary snapshot, so treat it as read-only and never mutate it. Side effects in reaction to state changes belong in watchers, which the guide covers next. Scope: Vue 3. Reviewed October 4, 2026.