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 allKeys.

But ESLint is giving me this error, Unexpected side effect in getkeys computed property.

I tried shifted the getkeys function to methods, but I think that it does not make sense to call a method everytime to get the translation done.
How can I solve this issue?

<template>

    <select v-model=selected>

    <option v-for=key in getkeys v-bind:key=key> {{ key }}</option

    </select>

</template>



data(){

    return{

    selected: '',

    allKeys: [],

    originalKeys: [],  //e.g. [ALPHA_MIKE]

    getTranslation: {} //e.g. {ALPHA_MIKE: ALPHA MIKE}

    }

},

computed: {

    getkeys(){

        let tableHeaders = [];

        for( var i=0; i<this.originalKeys.length; i++){

            let translation = this.getTranslation[this.originalKeys[i]];

            tableHeaders.push(translation);

        }

        this.selected = tableHeaders[0]; //unexpected side effect here

        this.allKeys = tableHeaders; //unexpected side effect here.

        return this.allKeys;

    }

}