Checking a substring from a programmatically added element in VueJs

I have a form that adds a new line on a button click. The new line must check for logic independently. In this case, it's chacking the first 2 digits of a barcode and associating it to a data set to see if it matches and return the appropriate value or "nothing found". I can't seem to get this right. First, it's not really evaluating at all. It only gives me "No Agency found" and second, it's doing it for all fields (because they all have the same v-model on a new line add). How can I achieve this so that it evaluates correctly and independently from each other?

Here's the relevant code in my template and script

<div id="q-app" class="q-pa-lg">
 <div class="col-6">
  <div v-for="(barcodefield, index) in barcodefields" :key="index">
   <div class="flex q-pt-lg">
    <div class="row flex-center">
     <div class="col-3">
      <div class="column">
       <div class="row q-pr-lg items-center">
        <label class="text-weight-medium">Starting Roll #:</label>
        <q-input outlined square dense maxlength="24"
         v-model.trim="barcodefield.start" ref="bcentry"></q-input>
       </div>
      </div>
     </div>
     <div class="col-3">
      <div class="column">
       <div class="row q-pr-lg items-center">
        <label class="text-weight-medium">Ending Roll #:</label>
        <q-input outlined square dense maxlength="24"
         v-model.trim="barcodefield.end" @blur="showAgencyName" ref="bcentry"></q-input>
       </div>
      </div>
     </div>
     <div class="col-5">
      <div class="column">
       <label class="text-weight-medium">
        Agency:
       </label>
       <div v-if="agencyName" style="min-height: 40px">
        {{ agencyName }}
       </div>
       <div v-else style="min-height: 40px"></div>
      </div>
     </div>
     <div class="col-1">
      <div class="block float-right">
       <q-btn v-if="index + 1 === barcodefields.length" @click="addLine" icon="add" color="primary" round />
       <q-btn v-else style="min-width: 42px"/>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>


export default {
  data() {
    return {
        barcodefields: [],
        barcodeprefixes: {
            "10": "Boston",
            "11": "New York",
            "13": "Houston",
            "14": "Connecticut",
            "16": "SIA",
            "17": "Colorado",
            "18": "Chicago",
            "19": "Washington",
        },
        barcodefield: {
          star: "",
          end: ""
        },
        agencyName: "",
    };
  },
  methods: {
    addLine() {
        this.barcodefields.push({
            start: null,
            end: null
        });
    },
    showAgencyName() {
        var str = this.barcodefield.end;
        var res = str.substring(0, 2);
        if (this.barcodeprefixes[res] == undefined) {
            this.agencyName = "Agency not found";
        } else {
            this.agencyName = this.barcodeprefixes[res];
        }
    },
  },
  mounted() {
    this.addLine();
  } 
}

Here is a codepen for you. Thanks in advanced