Таблица сортировки Vue. js "Ошибка типа: недопустимая попытка распространить не повторяемый экземпляр"

Question

Я пытаюсь упорядочить таблицу по столбцам, нажав на заголовок каждого столбца, который я заказал, я добился успеха, но теперь у меня ошибка с консоли. Ошибка при рендеринге: «Ошибка типа: недопустимая попытка распространить не повторяемый экземпляр». Как я могу это сделать, чтобы удалить его?

И я знаю, что ошибка здесь, потому что, если я ее удаляю, ошибка не появляется ,

sortedList () {
       return [... this.userInfo]
         .map (i => ({... i, sale_potential: parseFloat (i.sale_potential)}))
         .sort ((a, b) => {
       if (a [this.sortBy]> = b [this.sortBy]) {
         return this.sortOrder
           }
         return -this.sortOrder
       })
     }

new Vue({
  el: "#app",
  data: {
  	sortBy: "id_section",
    sortOrder: 1,
    userInfo: [
      {
      "id_store": 4,
      "id_section": 1,
      "desc_section": "MATERIALES DE CONSTRUCCION yeh",
      "id_rule": 1,
      "sale_potential": "69413"
    },
    {
      "id_store": 4,
      "id_section": 2,
      "desc_section": "CARPINTERIA Y MADERA",
      "id_rule": 1,
      "sale_potential": "74704"
    },
    {
      "id_store": 4,
      "id_section": 3,
      "desc_section": "ELECTR-FONTAN-CALOR",
      "id_rule": 1,
      "sale_potential": "101255"
    },
    {
      "id_store": 4,
      "id_section": 4,
      "desc_section": "HERRAMIENTA",
      "id_rule": 1,
      "sale_potential": "36969"
    }
    ]
  },
  computed: {
    sortedList() {
      return [...this.userInfo]
        .map(i => ({...i, sale_potential:parseFloat(i.sale_potential)}))
        .sort((a,b) => {
      	  if (a[this.sortBy] >= b[this.sortBy]) {
        	return this.sortOrder
          }
        return -this.sortOrder
      })
    }
  },
  methods: {
  	sort: function(sortBy){
    	if(this.sortBy === sortBy) {
      	this.sortOrder = -this.sortOrder;
      } else {
      	this.sortBy = sortBy
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  [{{sortBy}}] [{{sortOrder}}]
  <table id="mi-tabla">
    <thead>
      <tr class="encabezado-derecha">
        <th @click='sort("id_section")'>{{ sortBy === 'id_section' ? '*' : '' }}ID</th>
        <th @click='sort("desc_section")'>{{ sortBy === 'desc_section' ? '*' : '' }}Nombre de sección</th>
        <th @click='sort("sale_potential")'>{{ sortBy === 'sale_potential' ? '*' : '' }}Potencial (€)</th>
      </tr>
    </thead>
    <tbody>
      <tr class="item" v-for="user in sortedList">
        <td>{{user.id_section}}</td>
        <td>{{user.desc_section}}</td>
        <div class="acceder">
          <td>{{user.sale_potential | currency}}</td>
          <img src="../../iconos/icon/chevron/right@3x.svg" alt />
        </div>
      </tr>
    </tbody>
  </table>
</div>

https://codesandbox.io/embed/bold-dirac-67h5s?fontsize=14&hidenavigation=1&theme=dark