Vue.js: sort the list by method

Question

I am extracting some raw data and listing the items. Each element has a complex property that I generate using a method (which is not a computed property). This property may change as the user enters. Can I sort list items based on this property?

HTML:

<ul>
  <li v-for="item in items">
    <span>{{ calculateComplexProperty(item.time) }}</span>
  </li>
</ul>

JavaScript:

calculateComplexProperty: function (time) {
  // this.distance is an external factor that is not a property of the list item, 
  // and that can be manipulated by the user
  var speed = time * this.distance;

  return speed;
}

Thus, each element has a time value, which is controlled by the global dynamic coefficient "distance". The idea is to automatically sort the elements whenever the “distance” changes, and also update the “speed” property. Is it possible?

Answer 1

?

computed:{
    sortedItems(){
        return this.items.sort((a,b) => 
             this.calculateComplexProperty(a.time) - this.calculateComplexProperty(b.time))
    }
}

<li v-for="item in sortedItems">