Why immer and JSON.parse even with same output behaves differently on Vue?

[xxRockOnxx]

const jsonPOJO = JSON.parse(JSON.stringify(model.value));
const producePOJO = produce(model.value, (draft) => ...);
console.log(jsonPOJO, producePOJO);

The output here would be just plain object.

when assigning these via:

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const model = computed({
  get: () => readonly(props.modelValue),
  set: (value) => emit('update:modelValue', value)
})

// has proxy
model.value = jsonPOJO

// has no proxy
model.value = producePOJO

Open the devtools console when visiting the following reproduction.

Reproduction:

https://play.vuejs.org/#eNqVVV9P2zAQ/yqnvLQVJaHbnrqCgIlJ44GisfFCeDDJtTUktmU7AVT1u+9sJyGFDoSEUt8f/+7ud+djHZ0oFdcVRtNoZjLNlQWDtlJHqeClktrCGjQuxvRhuRTF8xgyWarKYg4bWGhZwoCuD3ruSsu8yrAz87JEPfieilRkUhgLJePiRGv2DIcOe3iTCoC1+wAINAQ9bUWAyqDuiQCcrJNW3ISD/6HP7chFSRI4MaYqEeyKG6C/xxWz7vcOuVgC1YHABTBfCgnCxv5WJ1KK+sHQdaQEM+Q1uqoUMNPxAFaSDmvvXVlmuRQBBeMlzH5Keco01PulzLE4TKOu6JuD2zSChAhu2HAOxERL69DXukQ7heEIDo+6iMMOIq5ZUSEBjcbOlxpGvl7nLzRkvXWnKP7YsLXxbBVoifUne+0s5PHFd2pRicyVBJXKmcVrzs6v5heUkAcPmd8bKS7n53O65IyxYtrg0B+N1cQ0X1DSrryQwWhE0NBdi0OvY9fhmOeE0qWxt9dGkQXGhVwOB12wO1xIjYG2KQzGHR5VQ0W/hCPA1vR/tMC+9/dg/XSJod1UXIYJ32ajGfuGkEbqlz+GYa7ZwvZ75BUfErEJxG1V0A/3hpKecQcrPeu7sB9yM0vCyqBZJsFiqQoiiCSAWc5rf6CXvW6QNv6ZzpJg8ue7ylpi1j4rpDcSJHodx1nBswfSbE1fGjWIf70Was784AXUcPnTwE0vd2E3XLyCnyW9QqNxFPbefslU7KaKFqnvbdoYTBp168vpaBc6TRqtrFVmmiRZLugi8cNrTZNgE6HKxPsdTw7iSTxJ9tCUadQ+WgppDfVswZevAroNwgvUc+XGdTswKwr5eO51VtMstvpshdnDDv29eQppXmqksayJoM5mmab1FMxnVxc0qz0jtboqyPsd42+keatcjsHttBI5pd3z89n+8vzRGvljzp4sCtMW5RL1bHj/NKL/Pz/eKf0l3a/xt47FzT/sAFmO

[xxRockOnxx]

According to an answer from Stackoverflow, apparently immer does something called Auto Freezing

and thus Vue can't transform the frozen object to a reactive one.