How to recognise that 1 item of a props object was changed?

I have an input component with a toggle that switches between readonly true or false. The data is sent down vi a props object like this

// Parent
updatePropsForChildComponent () {
  this.propsServiceURL.activeLanguage = this.speechRecognitionSelectedLanguage
  this.propsServiceURL.availableLanguages = this.availableLanguages
  this.propsServiceURL.readonly = true
}

// Child
props: {
  inputFieldProps: {
    type: Object
  }
},
data () {
  return {
    activeLanguage: this.inputFieldProps.activeLanguage,
    languages: this.inputFieldProps.availableLanguages,
    readonly: this.inputFieldProps.readonly
  }
},

I also set up some watchers, which don’t react (why?):

watch: {
activeLanguage (newVal, oldVal) {
console.log(‘activeLanguage oldVal =’, oldVal)
console.log(‘activeLanguage newVal =’, newVal)
console.log(’ ‘)
},
readonly (newVal, oldVal) {
console.log(‘readonly oldVal =’, oldVal)
console.log(‘readonly newVal =’, newVal)
console.log(’ ')
}
}

This works so far, the user can enter content by switching the readonly toggle.

What I want to do now is to set all readonly fields to false again once the form is saved. For that I call a function resetReadonlyProps in the parent, which updates the props:

resetReadonlyProps () {
  this.propsServiceURL.readonly = true
},

However, the child does not react to that.

I know that there is a limitation with object reactiveness in Vue, but I have no idea how this applies to props properly.

What do I have to do to make the child component react to the props object change?