Vue.Js: strange behavior with event triggered function

I have a simple vue.js program with a Form Select BootstrapVue component.

  <b-card title="Select Service:" style="max-width: 30rem;">
      <b-form-select v-model="pdServiceName"
        <template #first>
          <b-form-select-option :value="null" disabled>
            -- Please select a PD service --

import pdServiceData from '@/service/pd/pdSrvcData';

var vm = new Vue({
  data: {
    pdServiceName: null,
    pdServiceKey: null,
  computed: {
    pdServiceNameList: () => => a.service),
  methods: {
    setService() {
      console.log(pdServiceData.find((x) => x.service === this.pdServiceName).key);
      this.pdServiceKey = pdServiceData.find((x) => x.service === this.pdServiceName).key;


const pdServiceData = [
  { service: 'srvc_telemetry_staging_alarm', key: 'P6RHJHY' },
  { service: 'srvc_telemetry_wwe_staging_alarm', key: 'PI2UID2' },

export { pdServiceData as default };

When I select the options from the Form Select component, the method setService() will be triggered, but I found that the pdServiceKey calculated will be wrong, while if I print the value out to console at the same time, the printouts will be correct: enter image description here

Anyone has any idea why this happens?


problem is with the dev-tools. as you didn’t use ‘pdServiceKey’ to do anything on the dom, dev-tools ignores the update. if you want to see the change in dev-tools just click on the ‘data’ property in dev-tools