1---
2title: Computed Properties Cannot Accept Parameters
3impact: MEDIUM
4impactDescription: Attempting to pass arguments to computed properties fails or defeats caching
5type: capability
6tags: [vue3, computed, methods, parameters, common-mistake]
7---
8 
9# Computed Properties Cannot Accept Parameters
10 
11**Impact: MEDIUM** - Computed properties are designed to derive values from reactive state without parameters. Attempting to pass arguments defeats the caching mechanism or causes errors. Use methods or computed properties that return functions instead.
12 
13## Task Checklist
14 
15- [ ] Use methods when you need to pass parameters
16- [ ] Consider if the parameter can be reactive state instead
17- [ ] If you must parameterize, understand that returning a function loses caching benefits
18- [ ] Prefer method calls in templates for parameterized operations
19 
20**Incorrect:**
21```vue
22<template>
23  <!-- BAD: Computed properties don't accept parameters like this -->
24  <p>{{ filteredItems('active') }}</p>
25  <p>{{ formattedPrice(100, 'USD') }}</p>
26</template>
27 
28<script setup>
29import { ref, computed } from 'vue'
30 
31const items = ref([/* ... */])
32 
33// BAD: This won't work as expected
34// Computed is called once, not per parameter
35const filteredItems = computed((status) => {  // status will be undefined or previous value
36  return items.value.filter(i => i.status === status)
37})
38</script>
39```
40 
41```vue
42<script>
43export default {
44  data() {
45    return { items: [/* ... */] }
46  },
47  computed: {
48    // BAD: Computed doesn't receive arguments
49    filteredItems(status) {  // 'status' is actually 'this' or undefined
50      return this.items.filter(i => i.status === status)
51    }
52  }
53}
54</script>
55```
56 
57**Correct:**
58```vue
59<template>
60  <!-- GOOD: Use method for parameterized operations -->
61  <p>{{ getFilteredItems('active') }}</p>
62  <p>{{ formatPrice(100, 'USD') }}</p>
63 
64  <!-- GOOD: Or use computed with reactive filter state -->
65  <select v-model="statusFilter">
66    <option value="active">Active</option>
67    <option value="inactive">Inactive</option>
68  </select>
69  <p>{{ filteredItems }}</p>
70</template>
71 
72<script setup>
73import { ref, computed } from 'vue'
74 
75const items = ref([/* ... */])
76const statusFilter = ref('active')
77 
78// GOOD: Method for parameterized operations
79function getFilteredItems(status) {
80  return items.value.filter(i => i.status === status)
81}
82 
83function formatPrice(amount, currency) {
84  return new Intl.NumberFormat('en-US', {
85    style: 'currency',
86    currency
87  }).format(amount)
88}
89 
90// GOOD: Computed with reactive parameter
91const filteredItems = computed(() => {
92  return items.value.filter(i => i.status === statusFilter.value)
93})
94</script>
95```
96 
97## Workaround: Computed Returning a Function
98 
99If you need something computed-like with parameters, you can return a function. **However, this defeats the caching benefit:**
100 
101```vue
102<template>
103  <p>{{ getItemsByStatus('active') }}</p>
104</template>
105 
106<script setup>
107import { ref, computed } from 'vue'
108 
109const items = ref([/* ... */])
110 
111// This works but provides NO caching benefit
112// The inner function runs every time it's called
113const getItemsByStatus = computed(() => {
114  return (status) => items.value.filter(i => i.status === status)
115})
116 
117// This is essentially equivalent to just using a method
118// Only useful if you need to compose with other computed properties
119</script>
120```
121 
122## When to Use Each Approach
123 
124| Scenario | Approach | Caching |
125|----------|----------|---------|
126| Fixed filter based on reactive state | Computed | Yes |
127| Dynamic filter passed as argument | Method | No |
128| Filter options from user selection | Computed + reactive param | Yes |
129| Formatting with variable parameters | Method | No |
130| Composed derivation with argument | Computed returning function | Partial |
131 
132## Make Parameters Reactive
133 
134The best pattern is often to make the "parameter" a reactive value:
135 
136```vue
137<script setup>
138import { ref, computed } from 'vue'
139 
140const items = ref([/* ... */])
141 
142// Instead of passing 'status' as a parameter:
143const currentStatus = ref('active')
144 
145// Make a computed that uses the reactive status
146const filteredItems = computed(() => {
147  return items.value.filter(i => i.status === currentStatus.value)
148})
149 
150// Change the filter by updating the ref
151function filterByStatus(status) {
152  currentStatus.value = status
153}
154</script>
155```
156 
157## Reference
158- [Vue.js Computed Properties](https://vuejs.org/guide/essentials/computed.html)
159- [Vue.js Methods](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#declaring-methods)
160