getElementById(id).value is returning undefined or blank for v-select element

Question

I have added a dropdown for one of the columns in a table using v-select. This column is editable for multiple rows at the same time.In edit mode after selecting one of the dropdown values for each column i am trying to get the value of the field in one of the functions. I am trying to pinpoint the value by using document.getElementById. But its either returning undefined or blank. Following is the code.

  <v-select  
  v-else-if="head.fieldType === 'select'"
  :disabled="getFieldAccess(head, item)"
  :value="getFieldValue(head, item)"
  :id="getFieldId(head, item)"
  :items="['YES', 'NO']"
  v-model="selectedItem"
  item-text ="text"
  item-value = "selectedItem"
  ></v-select>  

I was able to identify that v-select adds two elements after I select a value, one is <div class=v-select__selection v-select__selection--comma>YES</div> and another <input id ="nameOfTheElement".....>

This works for other text and textarea fields.

Below is the script code. It is invoked when save button on the page is clicked.

collateDataAndInvokeSave: function() {
  console.log("Start collateDataAndInvokeSave --> " + this.selectedItem);
  let arrChangedData = [];
  let newVal = "";
  for (let iRow = 0; iRow < this.dataItems.length; iRow++) {
    let item = this.dataItems[iRow];
    console.log("Collecting Data for item --> ", item);
    let physicalId = item["physicalid"];
    let attributes = {};
    let changedRowData = {};
    for (let iCol = 0; iCol < this.columnHeaders.length; iCol++) {
      let head = this.columnHeaders[iCol];
      let existingVal = this.getFieldValue(head, item);
      newVal = document.getElementById(this.getFieldId(head, item)).value;
    }
    let attrExpr = head["itemJsonKey"];
    console.log(attrExpr);
    let attrName = "";
    console.log("existingVal --> " + existingVal + " newVal --> " + newVal);
    if (attrExpr.indexOf("attributes.") !== -1) {
      attrName = attrExpr.substr("attributes.".length);
    }
    if (attrName && !(attrName in attributes)) {
      attributes[attrName] = newVal;
    }
  }
  console.log("attributes ==> ", attributes);
  if (Object.keys(attributes).length !== 0) {
    console.log(Object.keys(attributes));
    changedRowData["physicalid"] = physicalId;
    changedRowData["attributes"] = attributes;
    console.log("**********changedRowData*****3333**********************", changedRowData);
    arrChangedData.push(changedRowData);
  }
}