EmberJS - Refactoring item into a Component stops Query Params and actions triggering

I currently have a small report builder in my application that updates query params in the URL. The query params are used to define criteria in a query on my back end and return the required report.

I am trying to refactor it into a component so that it can be used in other parts of the application.

Here is the report builder:

<div class="container" style="margin-top:100px">

  <div class="panel panel-info">
    <div class="panel-heading">
      <h3 class="panel-title">Report Builder</h3>
    </div>
    <div class="panel-body">
      <form class="form-horizontal" method="get" >
        <div class="form-group">

          <div class="col-sm-3"><label>Module:</label>
            
                  
            
          </div>

          <div class="col-sm-3"><label>Date From:</label></div>
          <div class="col-sm-3"><label>Date From:</label></div>
          <div class="col-sm-3"><label>Unit Number:</label></div>
          <div class="col-lg-10 col-lg-offset-5" style="margin-top:15px">
            <button type="reset" class="btn btn-default">Reset</button>
            <button type="submit" class="btn btn-info">Submit</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

And here are the actions that are used to set the query params for the query and take the user to the correct page afterwards. This code is on the controller for the reports.hbs template:

import Controller from '@ember/controller';

export default Controller.extend({

  queryParams: ['dateFrom', 'dateTo', 'unitNumber'],
  dateFrom: null,
  dateTo: null,
  unitNumber: null,

  actions: {
    selected(x) {
      module = x
    },

    onChangeDateFrom(selectedValue) {
      this.set('dateFrom', moment(selectedValue).format('DD-MM-YYYY'))

    },

    onChangeDateTo(selectedValue) {
      this.set('dateTo', moment(selectedValue).format('DD-MM-YYYY'))

    },

    submitQuery(dateFrom, dateTo, unitNumber) {
      switch (module) {
        case 'Option 1 List':
          this.transitionToRoute('option1list', {
            queryParams: {
              dateFrom: this.get('dateFrom'),
              dateTo: this.get('dateTo'),
              unitNumber: this.get('unitNumber')
            }
          })
          break;
        case 'Option 2 List':
          this.transitionToRoute('opton2list', {
            queryParams: {
              dateFrom: this.get('dateFrom'),
              dateTo: this.get('dateTo'),
              unitNumber: this.get('unitNumber')
            }
          })
          break;
        case 'Option 3 List':
          this.transitionToRoute('option3list', {
            queryParams: {
              dateFrom: this.get('dateFrom'),
              dateTo: this.get('dateTo'),
              unitNumber: this.get('unitNumber')
            }
          })
          break;
        case 'Option 4 List':
          this.transitionToRoute('opton4list', {
            queryParams: {
              dateFrom: this.get('dateFrom'),
              dateTo: this.get('dateTo'),
              unitNumber: this.get('unitNumber')
            }
          })
          break;
        case 'Select a Module:':
          alert('Please select a Module')
          break;
        default:
          console.log('error')
      }
    }
  }
});

When I create a component (report-builder) and put in the HTML the fields and actions no longer operate. Attempting to copy the actions into the report-builder.js.

transitionToRoute cannot be used in a component either. I tried to separate the actions into the JS file for the component and the transitions into a controller called report-builder but this did not produce any results.

I am new to Ember and Software Development, any advice is gratefully appreciated.