Polymer 2.0: изменение направления сортировки

Question

У меня есть элемент dom-repeat, который фильтрует и сортирует мои предметы. Я могу выбрать с помощью кнопки меню бумаги, если я сортирую по времени или по имени, которое работает нормально. Но теперь я хочу реализовать кнопку, которая изменяет направление сортировки (AZ или ZA) дополнительно к этому. В официальной документации от Polymer нет полезной информации об этой проблеме. Как будто я первый, кто пытается это сделать. Информации в интернете пока нет (ничего не могу найти).

Я пытался закодировать это сам.

Вот мой фактический код:

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="my-paper-element-styles.html">
<link rel="import" href="file-card.html">

<dom-module id="files-section">
     <template>
       <style include="my-paper-element-styles">
       </style>
      <search-bar placeholder="Search" hide-filter-button value="{{selectedFilter::input}}"></search-bar>
      <paper-menu-button>
            <paper-button class="sort-button" slot="dropdown-trigger">{{coputeFilterName(sortVal)}}</paper-button>
            <paper-listbox slot="dropdown-content" selected="{{sortVal}}">
              <paper-item>Name</paper-item>
              <paper-item>Drawing Time</paper-item>
            </paper-listbox>
      </paper-menu-button>
      <paper-icon-button class="upwards-downwards-button" icon="{{sortDirectionButtonIcon}}" on-click="computeSortingDirection"></paper-icon-button>
      <template is="dom-repeat" id="fileSortDOMRepeat" items="{{viperFiles}}" index-as="index" filter="{{filterFunction(selectedFilter)}}" sort="{{sortFunction(sortVal)}}">
        <file-card image="{{item.image}}" name="{{item.name}}" drawing-time="{{item.drawingTime}}"></file-card>
      </template>
     </template>
     <script>
          class FilesSection extends Polymer.Element {
               static get is() {
                    return 'files-section';
               }
               static get properties() {
                    return {                            
                        sortVal:{
                          tyoe: Number,
                          value: 0
                        },                         
                         sortDirection:{
                           type: Boolean,
                           value: false /*False means sorting is not reversed*/
                         },
                         sortDirectionButtonIcon:{
                           type: String,
                           value: 'viper-iconset:arrow-down'
                         }
                    };
               }
               ready() {
                    super.ready();
                    this.viperFiles = .... //Init the items in array
               }
               filterFunction(val) {
                 return function(viperFile) {
                      if (!val) return true;
                      if (!viperFile) return false;
                      var name = viperFile.name;
                      return (name  && ~name.toLowerCase().indexOf(val.toLowerCase()))
                      }
              }
              sortFunction(val) {
                  switch (val) {
                      case 0:
                          return function(a, b) {
                              if (a.name.toLowerCase() === b.name.toLowerCase()) return 0;
                              if(this.sortDirection == false){
                                  return a.name.toLowerCase() > b.name.toLowerCase() ? -1 : 1;
                              }else{
                                  return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
                              }

                          };
                      case 1:
                          return function(a, b) {
                              if (parseInt(a.drawingTime) === parseInt(b.drawingTime)) return 0;
                              if(this.sortDirection == false){
                                  return parseInt(a.drawingTime) > parseInt(b.drawingTime) ? -1 : 1;
                              }else{
                                  return parseInt(a.drawingTime) < parseInt(b.drawingTime) ? -1 : 1;
                              }

                          }
                  }
              }
               coputeFilterName(sortVal){
                 if(sortVal == 0){
                   return "Name";
                 }
                 if(sortVal == 1){
                   return "Drawing Time";
                 }
               }
               computeSortingDirection(){
                 console.log(this.sortDirection);
                 if(this.sortDirection == false){
                   this.sortDirection = true;
                   this.sortDirectionButtonIcon = 'viper-iconset:arrow-up';
                   this.sortFunction(this.sortVal);
                   this.$.fileSortDOMRepeat.render();
                 }else{
                   this.sortDirection = false;
                   this.sortDirectionButtonIcon = 'viper-iconset:arrow-down';
                   this.sortFunction(this.sortVal);
                   this.$.fileSortDOMRepeat.render();
                 }
               }
          }
          window.customElements.define(FilesSection.is, FilesSection);
     </script>
</dom-module>

Есть ли более простое решение для моей проблемы? Вот API из элемента dom-repeat.

Редактировать:

Проблема в том, что мне нужно обновлять dom-repeat каждый раз, когда я нажимаю кнопку, но как-то это не работает.