How do these actions resolve and bubble in this Ember.js app?

Here is my basic app in Ember.js:

This is my app/router.js:

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('todos', { path: '/'}, function() {
    this.route('complete');
    this.route('incomplete');
  });
});

export default Router;

So when I hit the root path or '/', my application.hbs loads first, then my app/templates/todos.hbs, then my app/templates/todos/index.hbs right? The app/templates/todos/index.hbs gets loaded inside the outlet of the todos.hbs right?

This is my app/templates/todos.hbs:

<p>
  this is the app/templates/todos.hbs.
</p>
{{todo-input action="createTodo"}}
{{#todo-list todos=model}}
    {{outlet}}
{{/todo-list}}

So my todo-input component has an action called 'createTodo'. When does this get called?

This is my todo-input component handlebars template:

<p>
  this is the todo-input.hbs component. It gets called inside todos.hbs
</p>
{{input type="text" id="new-todo" placeholder="What needs to be done?"
    value=newTitle enter="submitTodo"}}

Questions:

1. When I hit enter in the input field, it calls submitTodo right? Where does it look first? Does it look in the component's js file which is app/components/todo-input.js right? This is that code:

   import Ember from 'ember';
   
   export default Ember.Component.extend({
     actions: {
       submitTodo(newTitle) {
         if (newTitle) {
           this.sendAction('action', newTitle);
         }
             this.set('newTitle','');
       }
     }
   });
   
   

2. What argument gets passed to the submitTodo method?

3. What is this line:

   this.sendAction('action', newTitle);  
   
   

4. Where should I define this 'createTodo' action? Should it be put in the routes/todos.js ?

   import Ember from 'ember';

   export default Ember.Route.extend({ model() { return this.store.findAll('todo'); }, actions: { createTodo(newTitle) { this.store.createRecord('todo', { title: newTitle, complete: false }).save(); } } });

I am mainly confused as to how the action in this line:

{{todo-input action="createTodo"}}

relates to the enter attribute in the todo-input component template:

{{input type="text" id="new-todo" placeholder="What needs to be done?"
    value=newTitle enter="submitTodo"}}

When does the action createTodo even get fired?