1---
2category: Reactivity
3---
4 
5# toRefs
6 
7Extended [`toRefs`](https://vuejs.org/api/reactivity-utilities.html#torefs) that also accepts refs of an object.
8 
9## Usage
10 
11<!-- eslint-disable array-bracket-spacing -->
12<!-- eslint-disable ts/no-redeclare -->
13 
14```ts
15import { toRefs } from '@vueuse/core'
16import { reactive, ref } from 'vue'
17 
18const objRef = ref({ a: 'a', b: 0 })
19const arrRef = ref(['a', 0])
20 
21const { a, b } = toRefs(objRef)
22const [a, b] = toRefs(arrRef)
23 
24const obj = reactive({ a: 'a', b: 0 })
25const arr = reactive(['a', 0])
26 
27const { a, b } = toRefs(obj)
28const [a, b] = toRefs(arr)
29```
30 
31## Use-cases
32 
33### Destructuring a props object
34 
35```vue
36<script lang="ts">
37import { toRefs, useVModel } from '@vueuse/core'
38 
39export default {
40  setup(props) {
41    const refs = toRefs(useVModel(props, 'data'))
42 
43    console.log(refs.a.value) // props.data.a
44    refs.a.value = 'a' // emit('update:data', { ...props.data, a: 'a' })
45 
46    return { ...refs }
47  }
48}
49</script>
50 
51<template>
52  <div>
53    <input v-model="a" type="text">
54    <input v-model="b" type="text">
55  </div>
56</template>
57```
58 
59## Type Declarations
60 
61```ts
62export interface ToRefsOptions {
63  /**
64   * Replace the original ref with a copy on property update.
65   *
66   * @default true
67   */
68  replaceRef?: MaybeRefOrGetter<boolean>
69}
70/**
71 * Extended `toRefs` that also accepts refs of an object.
72 *
73 * @see https://vueuse.org/toRefs
74 * @param objectRef A ref or normal object or array.
75 * @param options Options
76 */
77export declare function toRefs<T extends object>(
78  objectRef: MaybeRef<T>,
79  options?: ToRefsOptions,
80): ToRefs<T>
81```
82