display pre-selected form values not 'stick' on on-change event in Polymer JS

Question

This is in Polymer JS. onchange is actually on-change.

I have a dropdown, with two items to select. Each item (commercial = 2, residential = 1) has specific fields in the DOM-repeat portion of the application, some would come with default values preselected on page load. For example, when Commercial is selected, the value for # of sites should be preselected to 1.

When I change the first business type (commercial) to the next, the fields get displayed in the dom-repeat should show the preselected values, instead, the fields don't display those preselected values that we saw on the first-page load (by default page load with Commercial business type being selected in the dropdown). my code is below:

//HTML dropdowns for business type (singleselect) and service type (multiselect)

<div class="flex-item" labelsTooltip">
  <se-singleselect title="Contract Business Type"
                   selected="{{_contract.businessTypeId}}" 
                   fieldvalue="businessTypeId"
                   fieldname="name" 
                   desc="Contract Business Type*"
                   datasrc="{{businessTypeItems}}" 
                   id="businessTypeSelect"
                   on-change="_refreshFields"
  ></se-singleselect>
</div>

<div class="flex-item labelsTooltip">
  <se-multiselect title="Service Type"
                  selected="{{_contract.serviceTypeIds}}" 
                  fieldvalue="serviceTypeId"
                  fieldname="name"
                  desc="Service Type*"
                  datasrc="{{serviceTypeItems}}"
                  id="serviceTypeSelect"
   ></se-multiselect>
</div>

//HTML dom-repeat by service types, three fields that should be auto populated based on business type are included.

<template is="dom-repeat"
   items="{{_selectedServiceType(_contract.serviceTypeIds, serviceTypeItems, _contract.businessTypeId)}}"
   as="_serviceTypeDetails">

  <div class="labelsTooltip" id="pricingMethod" style="margin-right: 10px;">
    <se-singleselect title="Pricing Method"
                     selected="{{_serviceTypeDetails.pricingMethodId}}"
                     fieldvalue="pricingMethodId" 
                     fieldname="name"
                     desc="Pricing Method*"
                     datasrc="{{pricingMethodItems}}"
                     id="pricingMethodSelect"
    ></se-singleselect>
  </div>
  
  <div class="flex-item labelsTooltip" style="display:flex; margin: 10px 0 0 15px;">
    <div style="padding-right: 5px;">
      <label title="# of Sites" for="serviceTypeDetails.noOfSites" style="display:block;"># of Sites</label>
      <input type="text"
             value="{{_serviceTypeDetails.noOfSites::input}}"
             on-input="_allowNumbersCharsOnly" />
    </div>
    </div>
    <div class="checkmark-item chckboxes">
      <input type="checkbox"
             id="chk-start{{index}}"
             checked="{{_serviceTypeDetails.sitesStartDateAligned::change}}">
      <label title="Start Dates are Aligned" for$="chk-start{{index}}" style="font-size: small; line-height: 12px;">Start Dates are Aligned</label>
  </div>
</template>

//Script

_selectedServiceType(val1, val2, val3) {
  var returnItems = [];
  if (val1 != undefined) {

    if (val1 == '-1') {
      for (var i = 0; i < val2.length; i++) {
        returnItems.push(val2[i]);
      }

    } else {
      var splitVal1 = val1.toString().split(',');

      for (var i = 0; i < val2.length; i++) {
        for (var j = 0; j < splitVal1.length; j++) {
          if (splitVal1[j] == val2[i].serviceTypeId) {
            returnItems.push(val2[i]);
          }
        }
      }
    }
  }

  for (const st of returnItems) {
    if (val3 == "2") {
      st.sitesStartDateAligned = true;

    }

    if (val3 == "1") {
      st.noOfSites = 1;
      st.pricingMethodId = 2;

    }

    if (this._contract.iterationId == '2' || this._contract.iterationId == '3') {
      st.pricingMethodId = 1;
    }
  }

  this.set('_contract.serviceTypeDetails', returnItems);
  return returnItems;
}