`script/prefer-computed`

Prefer computed() for derived reactive state

Default severity: warning
Presets: none
Automatic fix: None; review the suggested change
Applies to: JS/TS scripts in Vue SFCs; examples show the relevant Options API or script setup form
Options: No rule-specific options. Severity and preset selection are configurable.

The watcher must only derive the destination. Editable copies and callbacks with other side effects are allowed.

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  lint: {
    vize: {
      "preset": "incremental",
      "rules": {
        "script/prefer-computed": "warn"
      }
    },
  },
});

vp run lint

Bad

The watcher only copies a derivation of count into a second ref, doubled, so the derived state is maintained through manual synchronization.

<script setup lang="ts">
import { ref, watch } from "vue";
const count = ref(0);
const doubled = ref(0);
watch(count, (value) => { doubled.value = value * 2; });
</script>

Good

computed(() => count.value * 2) expresses the derivation directly and removes both the extra writable ref and its synchronization watcher.

<script setup lang="ts">
import { ref, computed } from "vue";
const count = ref(0);
const doubled = computed(() => count.value * 2);
</script>

Good avoids this rule's finding under the configuration above; other rules may still report diagnostics.

Implementation · All rules