vue3 为什么id是唯一，input却同时会展示？

Question

现在我们有这样需求，对用户的聊天记录可以编辑（如下图），我也实现了这个功能，但是有个问题，就是我每次点击一条数据编辑时，点击下一条，上一条数据不会关闭，很纳闷！我这里每个meg_id都是独立的也获取到了,却每次点击都是不是我想要的效果。我想要的是点击1后，再点击2的时候1关闭，不要同时都打开，是互斥的效果。

下面具体实现过程：

子组件：

<!-- 编辑文本内容 -->
<div class="chat-container" v-if="props.dialogData.showEditContent && changeMsgId">
            <div class="chat-input-box">
              <div class="top-boxes" v-loading="contentLoading">
                <el-input ref="textInput" id="chat-input" autosize
                  v-model="editContent" type="textarea" @input="updateCursorPosition" @click="updateCursorPosition" @keyup="updateCursorPosition" :placeholder="$t('text_send_to')" />
              </div>
            </div>
            <div class="input-tips" >
              ESC键<span class="pub-color">取消</span> · 回车键<span class="pub-color">保存</span>
            </div>
          </div>
          <div v-else :class="['dc-chat-content', props.dialogData.author.bot ? 'dc-chat-bot-content' : '']">
            <!-- 工具栏渲染 -->
            <el-popover placement="right" :visible="toolsVisible" :offset="1" :show-arrow="false"
              popper-class="custom-popper" :teleported="false">
              <div v-if="!props.dialogData.checked" class="more">
                <el-button-group>
                  <el-tooltip  v-for="item in menuItems" :key="item.id" effect="dark" :content="item.title" placement="top">
                    <el-button :icon="item.icon" size="small" :disabled="item.id === '2' && (userInfo.username !== props.dialogData.author.username || !Boolean(props.dialogData.content))" @click="handleSelect(item.id)" />
                  </el-tooltip>
                </el-button-group>
              </div>
.......

script内主要代码：

const props = defineProps<DcDialogItemProps>()
const emit = defineEmits<{
  (event: 'menuClick', value: string, item: object ): void
}>()
const menuItems = [
  {
    id: '1',
    icon: 'Finished',
    title: $t('text_multiple_choice')
  },
  {
    id: '2',
    icon: 'Edit',
    title: $t('btn_edit')
  },
  {
    id: '3',
    icon: 'ChatDotSquare',
    title: $t('btn_reply')
  }
]

// 处理菜单项点击事件
const editContent = ref('')
const changeMsgId = ref('')
const currentEditing = ref(false) //用来标记表单是否正在提交
const handleSelect = (val: string) => {
  if(val === '1') {
    props.dialogData.checked = true
  } else if (val === '2') {
    console.log('--handleSelect---2', props.dialogData);
    props.dialogData.isEditing = true
    currentEditing.value = false
    editContent.value = props.dialogData.content
    changeMsgId.value = props.dialogData.msg_id
    
  }
  emit('menuClick', val, props.dialogData)
}

父组件使用：

<dcDialogItem v-for="item in messageList"
                @menu-click="handleMenuClick"
                class="pulldown-list-item"
                :key="item.msg_id"
                :dialog-data="item"
                :id="'Msg' + item.msg_id" />

messageList的数据格式：

[
    {
        "msg_id": "1276491426334769232",
        "content": "啊撒大声地",
        "checked": false
    },
    {
        "msg_id": "1276493284222701702",
        "content": "asdasdaasdsadasd",
        "checked": false
    },
    ...省略
]

script主要方法：

const handleMenuClick = (val: string, dialogData: any) => {
  if(val === '1') {
    messageList.value.forEach((item) => {
      item.checked = true
    })
    showRecords.value = true
    showReplyMsg.value = false
    dialogData.showEditContent = false
  } else if(val === '2') {
    showReplyMsg.value = false
    replyAuthor.value = ''
    showRecords.value = false
    dialogData.showEditContent = true
  } else if(val === '3') {
    showReplyMsg.value = true
    dialogData.showEditContent = false
    replyAuthor.value = dialogData.author.username
    replyContent.value = dialogData.content
  }
}

求大佬帮忙指点，哪里问题