Unable to observe an array of objects in Ember.js?

I have an array of objects within a component like this:

checkboxes: [
    {
        label: 'A',
        state: false
    },
    {
        label: 'B',
        state: false
    },
    {
        label: 'C',
        state: false
    }
]

In my Handlebars template, I have a loop to show the list of checkboxes and each checkbox state maps back to the array item like this:

    <li><input type="checkbox" checked=> </li>

I wrote an observer to observe changes to the array but it doesn't seem to work:

observeCheckboxes: function() {
    console.log(this.get('checkboxes').toArray());
}.observes('checkboxes.[]')

How do I observe changes to the checkbox states so I can get a list of checked items?