title: How do I sort a computed property by a value?
body: <p>After looking at [Vue.JS' documentation][1], we're provided with a method which, as an example, sorts by all even numbers. That's all good, but I'd like to sort an array by a name value inside an array - meaning I need to do a comparison. All the answers I've found have since been deprecated and the only solutions are using other modules than VueJS itself. Is this really not possible or am I just missing something obvious?
  [1]: https://v2.vuejs.org/v2/guide/list.html#Displaying-Filtered-Sorted-Results</p>
  <p>Here's my example:</p>
  <pre><code>data() {
      return {
          namesArray: []
          ]
      };
    },
  ...
  computed: {
      addToNamesArray(){
          this.namesArray.push({&quot;firstName&quot;: 'Charles', &quot;lastName&quot;: 'Charleston'})
          this.namesArray.push({&quot;firstName&quot;: 'Albert', &quot;lastName&quot;: 'Alberterson'})
          this.namesArray.push({&quot;firstName&quot;: 'Bertrand', &quot;lastName: ''&quot;})
          return this.namesArray
          //(Obviously more complicated in reality, but let's keep it simple)
      }
  }
  </code></pre>
  <p>and in Vue:</p>
  <pre><code>&lt;ul&gt;
      &lt;li v-for=&quot;(namesList, index) in addNamesToArray&quot; :key=&quot;index&quot;&gt;
          {{namesList.firstName}}
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>Trying to sort within the computed property returns a &quot;Unexpected side effect in computed property&quot;-error, because one can't mutate inside a computed property. So my second try was making a method:</p>
  <pre><code>methods: {
      sortNames(){
          this.namesArray.sort((a,b) =&gt; a.firstName- b.firstName)
      }
  }
  </code></pre>
  <p>resulting in the new computed property:</p>
  <pre><code>computed: {
      addToNamesArray(){
          this.namesArray.push({&quot;firstName&quot;: 'Charles', &quot;lastName&quot;: 'Charleston'})
          this.namesArray.push({&quot;firstName&quot;: 'Albert', &quot;lastName&quot;: 'Alberterson'})
          this.namesArray.push({&quot;firstName&quot;: 'Bertrand', &quot;lastName: ''&quot;})
          this.sortNames()
          return this.namesArray
      }
  }
  </code></pre>
  <p>but this does nothing(???)</p>
  <p>I'd be really grateful if someone can explain to me why these solutions doesn't work and provide me with a one &lt;3</p>