I am currently creating an app in Vue 3 to track sports betting performances. I've got this component that's part of a form to input an individual leg of a bet slip. Each child component updates a details Object in the parent. The values update no problem. But I try to watch the details Object for changes so I can validate the information and update the appropriate flags I run into the following two errors, both at the Parent Component:

Invalid watch handler specified by key "undefined"

Invalid watch option: "deep" true

ParentComponent.vue

<template>
  <SelectComponent
    name="sports"
    id="sport-select"
    :options="marketOptions"
    :class="isValidMarket ? 'valid' : 'invalid'"
    @update="updateValue(details, 'sport', $event)"
  />
  <InputText
    type="text"
    for="subject"
    placeholder="Team / Player / Game"
    :class="isValidSubject ? 'valid' : 'invalid'"
    @update="updateValue(details, 'subject', $event)"
  />
</template>
<script>
export default {
  name: 'ParentComponent',
  data() {
    return {
      details: {
        sport: {
          type: String,
          default: '',
        },
        subject: {
          type: String,
          default: '',
        },
      },
      isValidMarket: false,
      isValidSubject: false,
    }
  },
watch: {
    details: {
      validate(val) {
        console.log(val)
        console.log('something changed!')
      },
    },
    deep: true,
  },

I've also tried a different approach on the watch property.

watch: {
    'details.sport': {
      validate: function (val) {
        if (val === '' || val === '--Select a Market--') {
          this.isValidMarket = false
        } else {
          this.isValidMarket = true
        }
      },
    },
}

Both of these produce the errors mentioned before and now validation isn't occurring correctly.

I've also structured the details Object as the following:

details: {
  sport: '',
  subject: ''
},

The watcher function must be called handler, and the deep property should be placed immediately after the handler function

https://vuejs.org/guide/essentials/watchers#deep-watchers (make sure to toggle from Composition to Options API in the top-left)

watch: {
  details: {
    handler(val) {
      console.log(val)
      console.log('something changed!')
    },
    deep: true
  }
},