title: "You may have an infinite update loop in a component render function" warning in Vue component
body: <p>I'm creating a basic table with a sorting feature:</p>
  
  <pre><code>&lt;template&gt;
    &lt;!-- more code --&gt;
    &lt;tr v-for="item in sortBy(data.body, { name: 'name', order: 1 })"&gt;
      &lt;td v-for="field in item"&gt;{{ field }}&lt;/td&gt;
    &lt;/tr&gt;
    &lt;!-- data.body =&gt; [{ name: Group 1 }, { name: Group2 }, // etc.] --&gt;
  &lt;/template&gt;
  
  props: {
    data: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  
  methods: {
    sortBy (data, params) { 
      // the warning disappears if I only leave "return data"
      data.sort((a, b) =&gt; {
        return a[params.name] - b[params.name] * params.order
      })
      return data
    }
  }
  </code></pre>
  
  <p>For some reason, I'm getting this warning:</p>
  
  <blockquote>
    <p>[Vue warn]: You may have an infinite update loop in a component render function.</p>
  </blockquote>
  
  <p>Why is this is and how to fix it?</p>