How to refer to a dictionary item of data property from el-table data in Vue

I’m using el-table in Vue3 project. I have 3 questions about the code below. The first is :data=”MyDatalist[row.id]” didn’t take effect. row.id do exist in somelist_1. I don’t know how to write this binding correctly. The expand el-table-column can’t work.

<el-table :data="somelist_1" :row-class-name="tableRowClassName">
      <el-table-column type="expand" @row-click="refresh(row)">
            <template #default="props">
              <div>
                <el-table :data="MyDatalist[row.id]" :row-class-name="tableRowClassName">
                  <el-table-column label="ele1" prop="id1_ele1" />
                  <el-table-column label="ele2" prop="id1_ele2" />                                  
                </el-table>
              </div>
            </template>
      </el-table-column>
      ..............other el-table-column
</el-table>

Data property MyDatalist like below. It’s a dictionary of list.

export default {         
    data() {
        return {
              MyDatalist:{
               "id1":[id1_ele1, id1_ele2], 
               "id2":[id2_ele1, id2_ele2]}
            }
          },  
        .....
        }

When I tried a simple form of MyDatalist like:

 MyDatalist:[id1_ele1, id1_ele2]

and

:data="MyDatalist"

respectively, it displayed well. So I think :data=”MyDatalist[row.id]” is not correct.

The second question is I want to use row-class-name=”tableRowClassName” to set different color in diferent row. It’s exactly copied from this.

The third question is @row-click=”refresh(row)” can’t trigger. I tried other event like @cell-mouse-enter seem didn’t trigger either.

For the 2nd and 3rd question, is there any way for me to root cause?