i need to output the values of the table using Vue Js QuerySelector. Here is my Element-UI table

<el-table
  :key="tableKey"
  v-loading="listLoading"
  :row-class-name="tableRowClassName"
  :data="list"
  border
  fit
  highlight-current-row
  style="width: 100%;"
  @sort-change="sortChange"
>
  <el-table-column label="Indicator" prop="id" align="center" width="100px" :class-name="getSortClass('id')">
    <template slot-scope="{row}">
      <span>{{ row.name }}</span>
    </template>
  </el-table-column>
  <el-table-column id="column_id" label="TX_NEW" width="100px" align="center">
    <el-table-column label="Male" width="70px" align="center">
      <template class="temp" slot-scope="{row}">
        <span id="sp" align="center" text-align="center">
          <el-input type="number" :id="row.id" :value="row.value" style="width:55px; font-size: x-small !important; text-align: center;" align="center" />
        </span>
      </template>
    </el-table-column>
  </el-table-column>

But i'm not able to get output when trying below javascript using querySelector for above HTML

const divElement = document.querySelector('#column_id')
    if (divElement) {
      const divTableBody = divElement.querySelectorAll('el-table-column .temp')
      for (let i = 0; i < divTableBody.length; i++) {
        const output = divTableBody[i].querySelector('el-input').textContent.trim()
        console.log(output)
      }
    }

Kindly, i need assist for the issue. Thank you