Sort an array before building virtual list

I have some data in an array to be displayed in a virtual list that I want to sort before building the list. I already have it working so the list re-orders on a pull-to-refresh. But for some annoying reason it doesn’t work in the pageInit listener. Any idea?

  return {
    data: function () {
      const self = this, app = self.$app;
      return {
        items: [
          {distance: 23, name: 'apple'},
          {distance: 16, name: 'pear'},
          {distance: 59, name: 'orange'},
          {distance: 8, name: 'banana'},
        ] 
      };
    },
    methods: {
      orderByKey: function (items, key) {
        const self = this;
        function compareKey(a, b) {
          if(a[key] < b[key]) return -1;
          if(a[key] > b[key]) return 1;
          return 0;
        }
        return items.sort(compareKey);
      },
      ptrPull: function (e, done) {
        const self = this;
        setTimeout(function () {
          self.orderByKey(items, 'distance');
          self.virtualList.replaceAllItems(items);
          done();
        }, 500);
      },
    },
    on: {
      pageInit: function() {
        const self = this, app = self.$app;
        // For some reason this isn't getting honoured
        self.items = self.orderByKey(self.items, 'distance');
      
        self.virtualList = app.virtualList.create({
          el: self.$el.find('.virtual-list'),
          items: items,
          itemTemplate: '<li>{{name}} : {{distance}}</li>',
          height: 100,
        });
      },
    },
  }

This is a simplified version of my code for illustration.

I see you reference just “items” in your code, what is it? Maybe it should be self.items?