ref() is calling reactive() behind the scenes. Since reactive() works for objects and ref() calls reactive(), objects work for both. BUT, ref() has a .value property for reassigning, reactive() does not have this and therefore CANNOT be reassigned.
it's a primitive (for example 'string', true, 23, etc). it's an object you need to later reassign (like an array - more info here).
reactive() when.. it's an object you don't need to reassign, and you want to avoid the overhead of ref(). ref() seems like the way to go since it supports all object types and allows reassigning with .value.
ref() is a good place to start, but as you get used to the API, know that reactive() has less overhead, and you may find it better meets your needs.
You'll always use ref() for primitives, but ref() is good for objects that need to be reassigned, like an array.
A good use-case for reactive() is a group of primitives that belong together:.
the code above feels more logical than. If you're still lost, this simple guide helped me: https://www.danvega.dev/blog/2020/02/12/vue3-ref-vs-reactive/.
An argument for only ever using ref(): https://dev.to/ycmjason/thought-on-vue-3-composition-api-reactive-considered-harmful-j8c.