Emberjs trying to create "radio button" type functionality

When a user clicks a model, set isActive:true and set all other models isActive:false.

I have two components and a route involved in trying to achieve this.

Starting at the top I have a distro-item which is a single model item

//components/distro-item
export default Component.extend({
  classNames: 'column is-2',
  tagName: 'div',
  isActive: false,

  actions: {
    toggleActive (distro) {
      this.sendAction('toggleActive', distro);
    }
  }

});

I then have a holder component which holds all the distro-items

// components/distro-holder
export default Ember.Component.extend({
  sortedDistros: Ember.computed.sort('distros', 'sortDefinition'),
  sortDefinition: ['sortOrder:acs'],

  distros: computed('sortedDistros.@each.isActive', function () {
    console.log("triggered");
  }),

  actions: {
    toggleActive(distro) {
      this.sendAction('toggleActive', distro);
    }
  }

});

Finally the route

//route/new
export default Route.extend(AuthenticatedRouteMixin, {

  selectedDistro: undefined,

  model() {
    return RSVP.hash({
      distros: get(this, 'store').findAll('distro'),
    });
  },

  setupController(controller, models) {
    controller.setProperties(models);
  },

  actions: {
    toggleActive(distro) {
      this.set('selectedDistro', distro);
    },
  }

});

I'm not sure which of the three things should be responsible for each part of the processes. initial thinking is the distro-holder should be responsible for figuring out which state each distro should be in, and sending that back to the route. However no matter what I try, I can't get the computed property to trigger. Should this be on the route, or elsewhere?

The documentation example seems to have it on the equivalent to the distro-holder. When I change the state of isActive it doesn't fire as I expect...

Any help is appreciated!