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/#eNqVVk1v4zYQ/SuELpZRR7I32T24zqIfyKGLNllsFttD1IMqjRwmEimIlJMg8H/vG1JSpMD5KAzYJOfNzJvhzNCPwa91He1aCtbBxmSNrK0wZNv6c6JkVevGikfRULEQd6nNrsVeFI2uxAwaswHxu67q7jyKecMGIeZPppWxQpGxlH+jQpyytfAqUUI88pfoZOt+K0RrqBlthZCQrvrt3i/cD77+mbOXOBZ/6q2wGuRJyAJG78QuLVtsjKgbff8gdCOUttEAphTxlLSjcqSnVQmkwkl95GWDmktAOESyEOFcnH72PDlKXVJU6m04c0BqZmA2lQy6kaN2tWTyb0Eif/R+ZMT5+5/wSLKD/cJHI6uKcplaWgvbtLTgs5yo9lvggN3EvlpQJ9hYquoSCtgJsXH1sDuqdE7laRIMruE0CUQM0CYeaQSLwBpwLeQ2ujFaoRQdjSTIYEiW1FzUViKWJBjKIgnSstR3X9zZQNLpXFN2e+D8xtzzWRJ8bQgR7ygJBplNmy1ZLz67PKd7rAchwmhLoF8RfiPkuWWOHvZbq3LQHuEc2z9cu0i1/W7O7i0p0wfl04p6dvgkQPtwDl8K/YnucXTS9cEeWfTteFSl9bM8esHUCF8yGDLda2trs47jLFdQxKXJXYPqsLGqq9jhflkto1W0in8iUyXByGXf7a+PjzR3fTUeHj+PAFr9pVuFGlmgZKu6xepFLHo5bzMa5I4eI/pRA0BtMGZyKqSir7wLr2auFn9w5c+46TyUKmkH5Bk2jGzrnCv/mUKv4o6h0/MMXT5xG+tuHPTBho5H9GRm7u4WyQHStaCDM4XwgM+Fn17clM57oopWZVwKwoN/yPTL5cV5b2qYQjxr7y7+vaGMQ2NIVKeNodAtjW1QfrJ4CJ0vPwvmblgMas/mAqw4FHN4NugmTEB5MOEoC58s7wNWBiliOhwQLovv9kBM3a0zmW45DgCjOG/Swj7NY8wrPngxFNRvx/FwQB0TxNR7PhhSL+wiStRQyeHoccB787dubk13/99lRbq1HWJ6m6v5QqyWy2XnDZoXiuC0IWGhxg9Vld6SMC1OpJ0ZYawsS//CvcP+B9j/MLF/rl128T6m6oEdvW6lv6JjGDqeGLp0RPBUvodMb+YEZk4mZiBhLttUupM34vkI/Y8TfR5IKZIDDTSo4KW9RsLS6nBkXblMzX5yHTE67fl6Ad7JT97pWy9hLndugT87j93s2Lt/LpvYi6YP4f4/FXI6ZQ==