looping over an array returned from function

As you'll see in the answer to this SO question it is possible to loop with {{#each}} in a component template over the return value of a component function that is an array. For convience sake, I copy that code here at the very bottom.

I tried to do something similar. In my template, I use a component and pass it an object with key values

{{'my-comp' kvobject=mykvobject}}

In components/my-comp.js, I create a function that returns an array

   keyvalues: function(){
      var emberobj = this.get('kvobject');
   //note the object I'm interested in is wrapped in some emberarray or object that is at emberobj[0]; 
      var arr = [];
      for (var key in emberobj[0]){ 
          if(emberobj[0].hasOwnProperty(key)){
               var pair = key + ' : ' + emberobj[0][key];
               arr.push(pair)
           }
      }
      return arr; 

   }

In my component template templates/components/my-comp, I do

  {{#each pair in keyvalues}}
    {{yield}}
  {{/each}}

But this throws an array, saying the value that #each loops over must be an Array. You passed function keyvalues().

Question: why can't I loop over the array returned from the function as a type of computed property? Below, is the code from the linked-to answer that I modeled my code after.

App.IncrementForComponent = Ember.Component.extend({
  numOfTimes: function(){
    var times = this.get('times');
    return new Array(parseInt(times));
  }.property('times')
});

Component template:
<script type="text/x-handlebars" id="components/increment-for">
  {{#each time in numOfTimes}}
    {{ yield }}
  {{/each}}    
</script>

Component usage:
{{#increment-for times=2 }}
  <div>How goes it?</div>
{{/increment-for}}