Passing the result of this.store.query to a component in EmberJS

I've build a custom dropdown element and I'm trying to use it to display a couple of things:

{{drop-down items=types selectionChanged="typeChanged"}}

{{drop-down items=meters selectionChanged="meterChanged"}}

In my controller I'm setting the values as follows:

types: [
  { value: "latest", name: "Latest Widget" },
  { value: "max", name: "Maximum Widget" },
  { value: "average", name: "Average Widget" },
],

meters: Ember.computed(function() {
  var meters = this.store.query('meter', { account_id: 2 });
  return meters;
}),

The values for both are appearing correctly:

<select id="ember826" class="ember-view form-control">
  <option value="">Please select a widget type...</option>
  <option value="latest">Latest Widget</option>
  ...
</select>

<select id="ember849" class="ember-view form-control">
  <option value="2">Meter 1</option>
</select>

My drop-down component uses the following to work out the selected value:

change: function(event) {
  var items = this.get('items');
  var index = event.target.selectedIndex;
  var selected = items ? items[index - 1] : null;
  console.log(selected); // error occurs here
  this.sendAction('selectionChanged', selected);
}

Now this works just fine for 'types' but for 'meters', selected is "undefined".

I then added console.log(JSON.stringify(items)); just before that line and, for the meters change, it gave me the following error:

Uncaught TypeError: Converting circular structure to JSON

If I add {{log types}} and {{log meters}} to the template, I get the following, which may shed some light on it:

Types:

Meters:

I notice that the latter has it wrapped in a couple of layers of 'content' keys so maybe the promise isn't being resolved properly?