Local mapping of vuex property is missing values

Please have a look at the screenshot. I’m trying to map a list of objects from vuex into the local component, but one of the object properties (the field _key ) is missing in each object instance of the list!!!

I have no idea what the problem could be:

  • The mutation payload in which data is saved to the store contains all the data
  • By inspecting the the vuex store the data is saved correctly

I tried defining the computed property both with return this.$store.state... and with the mapState helper, same result.

The only hint I noticed is that by logging the API response to the console, the field is missing there too…even though Chrome DevTools show the response is correct, which makes sense otherwise hoe could it be saved in the store?

I must have mapped vuex data all over my app a hundred times, and this is the first time I see something like this. Really driving me crazy!

Here is the supporting code:

// vuex module
const process = {

  state: {
    saved: [],
    temp: [],
    operations: [],
  },

   getters: {
    getOperations: state => state.operations
  },

  mutations: {
    /* irrelevant code... */

    LOAD_OPERATIONS(state, op_list) {
      Vue.set(state, 'operations', op_list)
    },
  },

  actions: {
    getOperations({commit}) {
      return new Promise( resolve => {
        api
        .get('operation')
        .then(resp => {
          commit('LOAD_OPERATIONS', resp.data)
          resolve()
        })
      }) 
    },
}


// Component
<script>
import LoadingSignal from "@/components/LoadingSignal.vue"
import multiMatch from "@/lib/MultiFieldSearch.js"

export default {

  name: 'OperationLibrary',

  components: { LoadingSignal },

  data () {
    return {
      vuex_ready: false,
      // other stuff...
    }
  },

  computed: {
    
    operation_list() {
      return this.$store.state.process.operations
      /* also tried with getter, same result: 
         return this.$store.getters.getOperations   */
    },
    // other stuff...
  },

  methods: {
    //...
  },

  created() {
    this.$store.dispatch('getOperations').then( () => this.vuex_ready = true )
  }
}
</script>

UPDATE 20200730

I tried setting a breakpoint right after the console.log statement and in that case the logging is correct! But if I don’t stop the execution, the value is lost because it gets evaluated later. Something is deleting the _key value, but the only thing that happens is the following:

commit('LOAD_OPERATIONS', resp.data)
// then the mutation
LOAD_OPERATIONS(state, op_list) {
      Vue.set(state, 'operations', op_list)
 }

Any hint as to where to look will be very appreciated…

Ok. @TheDutchCoder on Discord figured out it was a typo somewhere else in the component. I was making an assignment, instead of checking equality in a callback…

getOperationData() {
      return this.operation_list.find( op => op._key = this.selected_operation_key )
    }