How to pass computed properties from route to component

Taking the following as an example:

  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    <ul>
    {{#each model as |item|}}
      <li>{{item}}</li>
    {{/each}}
    {{magnus-component name=firstName}}
    </ul>
  </script>

  <script type="text/x-handlebars" data-template-name="components/magnus-component">
  <!-- Doesn't appear -->
    {{name}}
  </script>

...and

App = Ember.Application.create();

App.Router.map(function() {
});
App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  },
  name: "Magnus",
  surname: "Womble",
  fullName: Ember.computed('name', 'surname', function(){
    return this.get('name') + ' '+this.get('surname');
  })
});

Which can be found in the following jsbin:

http://ift.tt/1RbZ2tR

How do you correctly pass the fullName property to the component template?