While Boussadjra Brahim's method is effective, it may not provide a precise solution to the problem at hand.

Reactive data cannot be directly reassigned using =, but there is an alternative approach to reassigning reactive data using Object.assign.

Thus, this implementation should suffice:

    setup(){
        const formData = reactive({})
    
        onMounted(() => {
          fetchData().then((data) => {
            if (data) {
              Object.assign(formData, data) // equivalent to reassign 
            }
          })
        })
      }

Please Note:

This solution is most effective when your reactive object is either empty or consistently contains the same keys.

However, if for instance, the formData includes a key 'x' that is not present in the fetched 'data', the Object.assign operation will still preserve the 'key x'. This indicates that the reassignment is not entirely strict.

See demo example with watch functionality

While using Object.assign can be effective for simple scenarios, it may lead to reference loss in deeply nested objects, making it unsuitable as a universal solution. Debugging referential loss can also pose significant challenges.

After extensive exploration, I have devised a more robust approach, which I shared on my blog here. It involves a function that meticulously copies fields from one object to another, addressing various edge cases and potentially saving you from headaches:

/**
 * Recursively duplicates each field from src to dest, preserving reactivity.
 * This is particularly useful when copying values between an ordinary object and a reactive object.
 */
export function deepAssign<T extends object>(destObj: T, srcObj: T): void {
    const dest = destObj;
    const src = toRaw(srcObj);
    if (src instanceof Date) {
        throw new Error('[deepAssign] Dates must be copied manually.');
    } else if (Array.isArray(src)) {
        for (let i = 0; i < src.length; ++i) {
            // Handling different types of elements in the array
            ...
        }
    } else if (typeof src === 'object') {
        for (const k in src) {
            // Handling key-value pairs in the object
            ...
        }
    } else {
        throw new Error('[deepAssign] Unknown type: ' + (typeof src));
    }
}

To use this function, follow these steps:

const basicPerson = { // ordinary object
    name: 'Joe',
    age: 42,
};

const mary = reactive({ // reactive object
    name: 'Mary',
    age: 36,
});

deepAssign(mary, basicPerson); // Now mary reflects content of basicPerson

According to Boussadjra Brahim's initial argument, when dealing with reactive objects, it is suggested to define a state with nested fields. However, this approach tends to increase the complexity of our code and make it less readable. Additionally, most of the time, we prefer not to alter the original code structure.

Alternatively, the suggestion is to use ref instead of reactive. But again, this poses challenges as we then have to replace all instances of reactive objects with ref, adding an extra "value" property to the new "ref" variable in each instance. This can lead to potential errors and inconsistencies due to changes required in multiple scenarios.

In my view, a better solution would be utilizing Object.keys and forEach iteration to copy each field of a new object into our reactive object's fields in just one line. By implementing this solution, there is no need for any additional modifications in our code:

  setup(){
        const formData = reactive({})
    
        onMounted(() => {
          fetchData().then((data) => {
            if (data) {
             Object.keys(data).forEach(key=>formData[key]=data[key])
            }
          })
        })
      }

In my opinion, the most effective method right now involves using ref and updating with orig.value = newValue.

If you're looking to maintain reactivity in the target object without binding it directly to the source object, here's a way to achieve that.

This method allows me to retrieve data from the store into the component while having a local state for explicit saving or discarding of changes:

import { computed, reactive } from 'vue'
import { useMyStuffStore } from '@/stores/myStuffStore'

const { myStuff } = useMyStuffStore()

const form = reactive(JSON.parse(JSON.stringify(myStuff.foo)))

const hasPendingChanges = computed(() => {
  return JSON.stringify(form) !== JSON.stringify(myStuff.foo)
})

function saveChanges () {
  Object.assign(myStuff.foo, JSON.parse(JSON.stringify(form)))
}

function discardChanges () {
  Object.assign(form, JSON.parse(JSON.stringify(myStuff.foo)))
}

The myStuff object in the myStuffStore is declared as reactive.

You can now directly use the keys within form with v-model in input fields, for example:

<label for="name">Name:</label>
<input type="text" v-model="form.name" id="name" />

Changes will be synchronized to the store when `saveChanges()` is called and can be discarded by invoking `discardChanges()`.