Reactive Component Vue 3

App.vue

<script setup>
import { ref } from 'vue'
import CustomInput from './CustomInput.vue'
  
const messages = ref([])
messages.value.push({channel: { title: "Jarrod Roberson"}})
messages.value.push({channel: { title: "Julian Roberson"}})
messages.value.push({channel: { title: "Sebastian Roberson"}})
messages.value.push({channel: { title: "Valentino Roberson"}})

</script>

<template>
  <div v-for='(message, idx) in messages' :key='idx'>
      <CustomInput v-model="messages[idx].channel.title" /> {{ message.channel.title }}
  </div>
</template>

CustomInput.vue

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>