how to keep properties bound between parent/child components

I am building a pagination component in Ember 2.9 and am struggling with defining how each page element should be assigned an 'active' class while all others should be assigned an empty (non-active) class. Initially, I went with the method described in this SO response but in that example, controllers instead of components were used. In my case, the parent component defines properties that the child component needs access to.

The basic problem is that my template helper is not seeing changes on the property that is set by the parent component. I define the property curr_page_idx: 0 in the parent component, and when the user clicks on another page element, that value gets updated in the get_page_idx_clicked(idx) action handler.

However, the template helper still thinks that curr_page_idx = 0 even though I have passed that property down to the child component in the parent template.

Why isn't the template helper seeing that the property has been altered via the get_page_idx_clicked(idx) action handler, and how can I fix it?

// paginator-component.js
...
curr_page_idx: 0,
actions: {
  get_page_idx_clicked(idx) {
    this.set('curr_page_idx', idx-1);
    // checking the value of curr_page_idx via .get() 
    //  here indicates that it has been successfully changed
  },
}
...


// paginator-component.hbs
// total_pages_iterable is an array of fixed length 
//  with an integer for each element

  <li>
    <a class="" 
         
        href="javascript:void(0)">
      
    </a>
  </li>



// active-class.js
export function activeClass(params/*, hash*/) {
  // PROBLEM: the value of active is always 0 even after the value 
  //  in the parent component has been successfully changed !!
  const [index, active] = params;
  return (index === active) ? 'active-class': '';
}