В настоящее время я создаю приложение на Vue 3 для отслеживания результатов ставок на спорт. У меня есть этот компонент, который является частью формы для ввода отдельной части купона ставки. Каждый дочерний компонент обновляет объект details в родительском. Значения обновляются без проблем. Но я пытаюсь следить за изменениями в объекте details, чтобы проверить информацию и обновить соответствующие флаги. Я сталкиваюсь со следующими двумя ошибками, обе в родительском компоненте:

Неверный обработчик просмотра, указанный ключом «undef».

Неверный параметр просмотра: «глубокий» true

РодительскийКомпонент.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.info(val)
        console.info('something changed!')
      },
    },
    deep: true,
  },

Я также попробовал другой подход к свойству watch.

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

Оба из них приводят к ошибкам, упомянутым ранее, и теперь проверка происходит неправильно.

Я также структурировал объект details следующим образом:

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