vue/computed-pure

Why

A computed is a cached derivation: Vue runs it when it likes, as often as it likes, and caches only its return value. An async getter returns a promise, not the data; a request inside it fires at unpredictable times, and setting other state from it causes update loops and hard-to-follow renders.

Fix

Keep the getter a pure function of its sources. Load data in a watcher (watch(id, load, { immediate: true })), a data library or the framework's loader (useFetch in Nuxt), store the result in a ref, and derive from that ref in the computed.

Examples

// bad
const user = computed(async () => (await fetch(`/api/users/${id.value}`)).json())
// good
const user = ref(null)
watch(id, async (value) => { user.value = await getJson(`/api/users/${value}`) }, { immediate: true })
const name = computed(() => user.value?.name ?? '')

Sources

• Vue docs, Computed Properties (getters should be side-effect free)
• eslint-plugin-vue, no-async-in-computed-properties

Read it in the terminal

npx github:dawidolko/frontend-skills explain vue/computed-pure