vue-deepunref

import { ref } from 'vue'; import { deepUnref } from 'vue-deepunref'; // Assume saveRest is a function that sends data to a backend async function saveRest(data: Record<string, any>) { console.log('Sending data:', JSON.stringify(data, null, 2)); // In a real application, this would be an actual API call return new Promise(resolve => setTimeout(() => resolve({ success: true, data }), 500)); } const formData = { name: ref('Alice Smith'), age: ref(30), address: { street: ref('123 Vue Lane'), city: ref('Refsburg') }, tags: [ref('frontend'), ref('vue-3')], preferences: ref({ notifications: ref(true), theme: 'dark', language: ref('en-US') }), items: [ { id: 1, name: ref('Item A') }, { id: 2, name: ref('Item B'), quantity: ref(5) } ] }; console.log('Original form data (reactive structure):', formData); // Simulate sending form data to a backend that expects plain objects // deepUnref creates a new plain object structure without affecting the original. const result = await saveRest(deepUnref(formData)); console.log('API response:', result); // Verify that the original form data remains reactive console.log('Original form data after unref operation (still reactive):', formData.name.value); formData.name.value = 'Bob Johnson'; console.log('Original form data updated:', formData.name.value);