vu3 toRef() vs toRefs()

toRef_vs_toRefs.txt

https://vuejs.org/api/reactivity-utilities.html#toref

https://vuejs.org/api/reactivity-utilities.html#torefs

In Vue 3, both toRef() and toRefs() are part of the Composition API and serve different purposes:

toRef():
Converts a single reactive object property to a ref that maintains its connection with the parent object.

Example:

const state = reactive({ foo: 1, bar: 2 });
const fooRef = toRef(state, 'foo'); // fooRef: Ref<number>

If state.foo changes, fooRef.value will change as well.
Useful when you want to copy a value property from an object and maintain its reactivity.

toRefs():
Converts all properties of a reactive object to a new plain object 
where each property is a ref pointing to the corresponding property of the original object.

Example:

const state = reactive({ foo: 1, bar: 2 });
const stateAsRefs = toRefs(state); // { foo: Ref<number>, bar: Ref<number> }

Useful when destructuring a reactive object (e.g., from a composable) 
and needing individual refs for each property.
Remember that toRef is for a single property, while toRefs is for all properties of an object1. 

If you’re working with non-object variables, use toRef. 
If you’re destructuring an object, consider using toRefs.