how does ref() handle nested objects differently from reactive()

1. Handling Nested Objects:
- ref(): When you use `ref()` to make a nested object reactive, it creates a new reactive object that wraps the original object. This means that any changes to the nested object are tracked and updated correctly. For example, if you have a nested object `user` with properties `name` and `address`, and you use `ref()` to make it reactive, any changes to `user.name` or `user.address` will be tracked and updated correctly[1][2][3].

javascript
   import { ref } from 'vue';

   const user = ref({
     name: 'Michael Scott',
     address: {
       street: '123 Main St',
       city: 'Scranton',
       state: 'PA',
       zip: '12345'
     }
   });

   user.value.name = 'Jim Halpert';
   console.log(user.value.name); // logs Jim Halpert
   console.log(user.value.address.street); // logs 123 Main St
   

- reactive(): When you use `reactive()` to make a nested object reactive, it creates a proxy for the original object. This means that any changes to the nested object are tracked and updated correctly, but if you reassign the entire object, the reactivity is lost. For example, if you have a nested object `user` with properties `name` and `address`, and you use `reactive()` to make it reactive, any changes to `user.name` or `user.address` will be tracked and updated correctly. However, if you reassign `user` to a new object, the reactivity is lost[1][2][3].

javascript
   import { reactive } from 'vue';

   const user = reactive({
     name: 'Michael Scott',
     address: {
       street: '123 Main St',
       city: 'Scranton',
       state: 'PA',
       zip: '12345'
     }
   });

   user.name = 'Jim Halpert';
   console.log(user.name); // logs Jim Halpert
   console.log(user.address.street); // logs 123 Main St

   user = {
     name: 'Dwight Schrute',
     address: {
       street: '456 Main St',
       city: 'Scranton',
       state: 'PA',
       zip: '12345'
     }
   };

   console.log(user.name); // logs Dwight Schrute
   console.log(user.address.street); // logs 456 Main St
   

In summary, `ref()` creates a new reactive object that wraps the original object, ensuring that any changes to the nested object are tracked and updated correctly. `reactive()` creates a proxy for the original object, which also tracks changes correctly but loses reactivity if the entire object is reassigned.