Vue 3 Изменение значение реактивного объекта

Как можно изменить значение реактивного объекта? Есть родительский компонент. В котором вызывает дочерний компонент ModeList. В дочерний компонент через цикл , прокидываю элементы объекта modes.

<template>
    <template v-for="mode in modes" :key="mode.id">
      <ModeList :mode="mode" @isTime="eventIsTime" />
    </template>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue"

import Modes from "@js/types/Modes"
import ModeList from "@js/components/lists/it-list-mode.vue"

export default defineComponent({
  components: { ModeList },
  setup() {
    const modes = ref<Modes[]>([
      {
        id: 1,
        wday: 0,
        isTime: true,
        ...
      },
      {
        id: 2,
        wday: 1,
        isTime: false,
        ....
      },
    ])

    const eventIsTime = (value: Object) => {
      // Example var 
      const wday = 0
      const id = 1
     
      const rs = modes.value.find(function (x) {
        return x.id == 1 && x.wday == 1
      })
      if (rs) {
        rs.isTime = true
      }
    }


    return {
      modes,
      eventIsTime,
    }
  },

})
</script>

Дочерний компонент. После каких-то манипуляций в дочернем компоненте, необходимо прокидывать в родительский компонент значение isTime. Из этого компонента эмичу наверх данные. В функции eventIsTime провожу поиск объекта который нужен , для установки нового значения isTime. Но установить не получается. Как правильно найти и установки свойство у реактивного объекта ?

<template>
  <ClCheckbox v-model="isTimeValue"></ClCheckbox>
</template>
<script lang="ts">
import { computed, defineComponent, PropType, toRefs } from "vue"
import Modes from "@js/types/Modes"
import ClCheckbox from "@js/components/form/cl-checkbox.vue"

export default defineComponent({
  components: { ClCheckbox },
  props: {
    mode: {
      required: true,
      type: Object as PropType<Modes>,
    },
  },
  emits: ["isTime"],
  setup(props, context) {
    const mode = toRefs(props.mode)

    const isTimeValue = computed({
      get(): boolean {
        return props.mode.isTime
      },
      set(value: boolean) {
        mode.isTime.value = value
        context.emit("isTime", { isTime: value, id: mode.id.value })
      },
    })

    return {
      ...mode,
      isTimeValue,
    }
  },
})
</script>


Ответы (0 шт):