Handling unexpected side effect in computed properties - VueJS

Question

In the following code, I\'m trying to use the getTranslation object to map values present in originalKeys array and push the values in a new array

Answer 1

I would advice you to move allKeys array to computed and get rid of unnecessary tableHeaders and getKeys:

data(){
    return{
    selected: '',
    originalKeys: [],  //e.g. ["ALPHA_MIKE]
    getTranslation: {} //e.g. {"ALPHA_MIKE": "ALPHA MIKE"}
    }
},
computed: {
    allkeys() {
        return this.originalKeys.map(key => this.getTranslation[key])
    }
}

I'm not sure you need to assign this.selected = tableHeaders[0] since the first option will be chosen by default automatically.