Must use `set` or head template does not update

[YoranBrondsema]

I am using ember-cli-head directly in my application (Ember.js 3.20.4) to update the document title. So templates/head.hbs is simple:

// templates/head.hbs
<title>{{this.model.title}}</title>

I have two routes:

// routes/a.js
export default class RouteA extends Route {
  @service headData;

  afterModel() {
    this.headData.title = 'A';
  }
}

// routes/b.js
export default class RouteB extends Route {
  @service headData;

  afterModel() {
    this.headData.title = 'B';
  }
}

However, the title is not updated when changing routes. It's like templates/head.hbs is not reactive to the changes in properties on headData.

It does work when I use the pre-Octane set method. The titles are correctly updated in the template when changing routes:

// routes/a.js
export default class RouteA extends Route {
  @service headData;

  afterModel() {
    this.headData.set('title', 'A');
  }
}

// routes/b.js
export default class RouteB extends Route {
  @service headData;

  afterModel() {
    this.headData.set('title', 'B');
  }
}

[rwjblue]

I think you need to declare your headData and add @tracked title

[YoranBrondsema]

@rwjblue Of course... Thanks! Thought it'd be useful to document this is in the README for the next person who forgets this!

[rwjblue]

Absolutely, documenting seems like a great idea!