Match an object to an array for sorting in vuejs

I'm building an SPA chat app with roughly 3,000 rooms. The homepage will rank each room based on number of active participants.

For this I'm using Laravel, Vuejs, Laravel Echo and Socket.io.

I have built a simple version of my app here to understand my codebase: https://jsfiddle.net/benjifisher/3cotxu29/

Essentially I'm using the Laravel Echo Server HTTP API end point to retrieve the channel data. I list render the channel count for each room.

What I need advice on is how to sort the rooms based on the subscription count value. I understand I need to match the objects to the array and potentially push to a new array?

Below is a snippet

new Vue({
  el: "#app",

  data: {
    rooms: [
      { id: 1, name: "Room 1", url: 'room1'},
      { id: 2, name: "Room 2", url: 'room2' },
      { id: 3, name: "Room 3", url: 'room3' },
      { id: 4, name: "Room 4", url: 'room4' },
      { id: 5, name: "Room 5", url: 'room5'},
      { id: 6, name: "Room 6", url: 'room6' },
      { id: 7, name: "Room 7", url: 'room7' },
      { id: 8, name: "Room 8", url: 'room8' }
    ],
    channels: {
            channels: {
        presence_room4: {
            occupied: true,
          subscription_count: 2,
        },
        presence_room5: {
            occupied: true,
          subscription_count: 1,
        }
        }
    }

  },
  computed: { 

  },
  methods: {

  }
})

Thank you in advance.

Ben

via Chebli Mohamed