title: Handling unexpected side effect in computed properties - VueJS
body: <p>In the following code, I'm trying to use the <code>getTranslation</code> object to map values present in <code>originalKeys</code> array and push the values in a new array <code>allKeys</code>.</p>
  
  <p>But ESLint is giving me this error, <code>Unexpected side effect in "getkeys" computed property.</code></p>
  
  <p>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?</p>
  
  <pre><code>&lt;template&gt;
      &lt;select v-model="selected"&gt;
      &lt;option v-for="key in getkeys" v-bind:key="key"&gt; {{ key }}&lt;/option
      &lt;/select&gt;
  &lt;/template&gt;
  
  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&lt;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;
      }
  }
  </code></pre>