Binding ember model in dynamically generated form

I am learning ember js from last couple of weeks, and building an application to learn it. I am in a situation where I have to build a dynamic form which will be bind to ember model. (the simplest example for this problem could be nested form, where we can click on add more link/button to add form on the fly, and add values to them).

But for me, I am building survey like site, where we can have lots of option to select and user can select one of the option from available one:

what I have done so far?

readAnswer: Ember.computed(function() {
    return this.get('store').query('answer', { filter:
      {
        question_id: this.get('question.id'),
        submission_id: this.get('submission.id')
      }
    })
  }),

  buildAnswer: Ember.computed(function() {
    this.get('store').createRecord('answer', {
      question: this.get('question'),
      submission: this.get('submission')
    })
  }),

  answer: Ember.computed(function() {
    const ans = this.get('readAnswer');
    console.log(`question_id: ${this.get('question.id')}, submission_id:     ${this.get('submission.id')}`);
    if(Ember.isEmpty(ans)) {
      return this.get('buildAnswer');
    } else {
      return ans;
    }
  })

answer.hbs

<div class="row col-sm-12">
  <div class="form-group">
    <label></label>
    <p>
      
    </p>
    <p>
      
    </p>
  </div>
</div>

NOTE here answer.hbs is a component, and these are call recursively (in loop) from parent route. So for 2 questions, we can have 4 textboxes, 2 text box for each question, first textbox for answer.field01 and second textbox for answer.field02

Let's say I have 2 questions, till now, I can see 2 answers build in the ember store if they don't already exists in database and then, I can see 4 textboxes generated in view. But they are not binding. Meaning, if I can value of the textbox, nothing happens in the ember store.

Expected Result

When I input answer in the textbox, it should bind with answer.fieldxx properly.