1---
2category: Reactivity
3alias: controlledComputed
4---
5 
6# computedWithControl
7 
8Explicitly define the dependencies of computed.
9 
10## Usage
11 
12```ts twoslash include main
13import { computedWithControl } from '@vueuse/core'
14 
15const source = ref('foo')
16const counter = ref(0)
17 
18const computedRef = computedWithControl(
19  () => source.value, // watch source, same as `watch`
20  () => counter.value, // computed getter, same as `computed`
21)
22```
23 
24With this, the changes of `counter` won't trigger `computedRef` to update but the `source` ref does.
25 
26```ts
27// @include: main
28// ---cut---
29console.log(computedRef.value) // 0
30 
31counter.value += 1
32 
33console.log(computedRef.value) // 0
34 
35source.value = 'bar'
36 
37console.log(computedRef.value) // 1
38```
39 
40### Manual Triggering
41 
42You can also manually trigger the update of the computed by:
43 
44```ts
45// @include: main
46// ---cut---
47const computedRef = computedWithControl(
48  () => source.value,
49  () => counter.value,
50)
51 
52computedRef.trigger()
53```
54 
55### Deep Watch
56 
57Unlike `computed`, `computedWithControl` is shallow by default.
58You can specify the same options as `watch` to control the behavior:
59 
60```ts
61const source = ref({ name: 'foo' })
62 
63const computedRef = computedWithControl(
64  source,
65  () => counter.value,
66  { deep: true },
67)
68```
69 
70## Type Declarations
71 
72```ts
73export interface ComputedWithControlRefExtra {
74  /**
75   * Force update the computed value.
76   */
77  trigger: () => void
78}
79export interface ComputedRefWithControl<T>
80  extends ComputedRef<T>, ComputedWithControlRefExtra {}
81export interface WritableComputedRefWithControl<T>
82  extends WritableComputedRef<T>, ComputedWithControlRefExtra {}
83export type ComputedWithControlRef<T = any> =
84  | ComputedRefWithControl<T>
85  | WritableComputedRefWithControl<T>
86export declare function computedWithControl<T>(
87  source: WatchSource | MultiWatchSources,
88  fn: ComputedGetter<T>,
89  options?: WatchOptions,
90): ComputedRefWithControl<T>
91export declare function computedWithControl<T>(
92  source: WatchSource | MultiWatchSources,
93  fn: WritableComputedOptions<T>,
94  options?: WatchOptions,
95): WritableComputedRefWithControl<T>
96/** @deprecated use `computedWithControl` instead */
97export declare const controlledComputed: typeof computedWithControl
98```
99