javascript - Vue.js3 - Reaonly on nested object

Question

Is there any way using the new Vue.js Reactivity API to bind an object key to an existing Ref value as readonly?

Example.

setup() {
  const input = ref({
    firstName: 'Bob',
    email: '[email protected]'
  })

  const args = {
    postID: 32,
    email: readonly(input.value.email)
  }

  return { input, args }
}

This doesn't work.
args.email doesn't get updated.

question from:https://stackoverflow.com/questions/65848103/vue-js3-reaonly-on-nested-object

Answer 1

As @boussadjra-brahim pointed out, readonly can't be used for nested fields.
Only workaround without copying the whole object might be using computed then.

const args = computed(() => {
  return {
    post_id: 32,
    email: input.value.email,
  }
})