1---
2category: Reactivity
3related: syncRef
4---
5 
6# syncRefs
7 
8Keep target refs in sync with a source ref
9 
10## Usage
11 
12```ts
13import { syncRefs } from '@vueuse/core'
14import { shallowRef } from 'vue'
15 
16const source = shallowRef('hello')
17const target = shallowRef('target')
18 
19const stop = syncRefs(source, target)
20 
21console.log(target.value) // hello
22 
23source.value = 'foo'
24 
25console.log(target.value) // foo
26```
27 
28### Sync with multiple targets
29 
30You can also pass an array of refs to sync.
31 
32```ts
33import { syncRefs } from '@vueuse/core'
34import { shallowRef } from 'vue'
35 
36const source = shallowRef('hello')
37const target1 = shallowRef('target1')
38const target2 = shallowRef('target2')
39 
40const stop = syncRefs(source, [target1, target2])
41 
42console.log(target1.value) // hello
43console.log(target2.value) // hello
44 
45source.value = 'foo'
46 
47console.log(target1.value) // foo
48console.log(target2.value) // foo
49```
50 
51## Watch options
52 
53The options for `syncRefs` are similar to `watch`'s `WatchOptions` but with different default values.
54 
55```ts
56export interface SyncRefOptions {
57  /**
58   * Timing for syncing, same as watch's flush option
59   *
60   * @default 'sync'
61   */
62  flush?: WatchOptionFlush
63  /**
64   * Watch deeply
65   *
66   * @default false
67   */
68  deep?: boolean
69  /**
70   * Sync values immediately
71   *
72   * @default true
73   */
74  immediate?: boolean
75}
76```
77 
78When setting `{ flush: 'pre' }`, the target reference will be updated at [the end of the current "tick"](https://vuejs.org/guide/essentials/watchers.html#callback-flush-timing) before rendering starts.
79 
80```ts
81import { syncRefs } from '@vueuse/core'
82import { nextTick, shallowRef } from 'vue'
83 
84const source = shallowRef('hello')
85const target = shallowRef('target')
86 
87syncRefs(source, target, { flush: 'pre' })
88 
89console.log(target.value) // hello
90 
91source.value = 'foo'
92 
93console.log(target.value) // hello <- still unchanged, because of flush 'pre'
94 
95await nextTick()
96 
97console.log(target.value) // foo <- changed!
98```
99 
100## Type Declarations
101 
102```ts
103export interface SyncRefsOptions extends ConfigurableFlushSync {
104  /**
105   * Watch deeply
106   *
107   * @default false
108   */
109  deep?: boolean
110  /**
111   * Sync values immediately
112   *
113   * @default true
114   */
115  immediate?: boolean
116}
117/**
118 * Keep target ref(s) in sync with the source ref
119 *
120 * @param source source ref
121 * @param targets
122 */
123export declare function syncRefs<T>(
124  source: WatchSource<T>,
125  targets: Ref<T> | Ref<T>[],
126  options?: SyncRefsOptions,
127): WatchHandle
128```
129