oxc-project/oxc · warning · OxcDiagnostic

Unexpected side effect in computed function.

Error message

Unexpected side effect in computed function.

What it means

The function-form diagnostic of vue/no-side-effects-in-computed-properties: 'Unexpected side effect in computed function.' It covers computed values that are plain functions without a named key to report — e.g. computed functions in `setup()` or standalone computed contexts — where the rule still detects a mutating statement inside the body. Same failure mode as the named variant: computeds are cached and re-run on dependency change, so side effects there trigger redundant renders or infinite loops.

Source

Thrown at crates/oxc_linter/src/rules/vue/no_side_effects_in_computed_properties.rs:25

use oxc_span::{GetSpan, Span};

use crate::{
    AstNode,
    context::LintContext,
    frameworks::FrameworkOptions,
    rule::Rule,
    utils::{
        ComputedContext, find_computed_context, is_this_object, is_vue_component_options_object,
    },
};

fn unexpected_side_effect_in_property(span: Span, key: &str) -> OxcDiagnostic {
    OxcDiagnostic::warn(format!("Unexpected side effect in \"{key}\" computed property."))
        .with_label(span)
}

fn unexpected_side_effect_in_function(span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn("Unexpected side effect in computed function.").with_label(span)
}

#[derive(Debug, Default, Clone)]
pub struct NoSideEffectsInComputedProperties;

declare_oxc_lint!(
    /// ### What it does
    ///
    /// Disallow side effects in computed properties.
    ///
    /// ### Why is this bad?
    ///
    /// It is considered a very bad practice to introduce side effects inside computed properties.
    /// It makes the code unpredictable and hard to understand.
    ///
    /// ### Examples
    ///
    /// Examples of **incorrect** code for this rule:

View on GitHub (pinned to e1e7af627c)

Solutions

1. Keep the computed body pure — only read reactive state and return a value.
2. Move writes into `watch`/`watchEffect` callbacks or explicit methods triggered by user events.
3. If two pieces of state must stay in sync, derive one from the other instead of writing inside a computed.
4. Re-run oxlint to confirm.

Example fix

// before
const total = computed(() => {
  state.count += 1; // side effect in computed function
  return state.items.length;
});

// after
const total = computed(() => state.items.length);
watch(total, (t) => { state.count = t; });

When it happens

Trigger: A computed function (setup-style or unnamed in the detected computed context) containing an assignment or external mutation, e.g. `const total = computed(() => { state.lastTotal = ...; return ... })`.

Common situations: Composition-API refactors where former methods became computed; logging/counters written into reactive state inside computed; syncing two pieces of state by writing one from inside a computed of the other.

Related errors

• Unexpected side effect in "{key}" computed property.
• Change to `throw new TypeError(...)`
• Unexpected {} in "{}" computed property.
• Unexpected {} in computed function.
• The computed property cannot be used in `data()` because it

AI-assisted analysis of oxc-project/oxc@e1e7af627c (2026-08-20). Data as JSON: /api/errors/ec8097ab88b850da. Report an issue: GitHub.