Observer Not Triggered On CP

controllers.application\.js

import Controller from '@ember/controller';
import { action, computed, get, set } from '@ember/object';
import { A } from '@ember/array';
import { observes } from '@ember-decorators/object';
import { addObserver } from '@ember/object/observers';

export default class ApplicationController extends Controller {
  myArr = A();

  @computed('myArr.[]')
  get derivedArr() {
    return this.myArr.map(x => x.val);
  }

  // @computed('derivedArr.[]')
  // get derivedArrIncludes() {
  //   return this.derivedArr.includes(4);
  // }
  init() {
    super.init(...arguments);
    addObserver(this, 'derivedArr.[]', this.updateDerivedArrIncludes4);
    this.derivedArr;
  }

  //@observes('derivedArr.[]')
  @action
  updateDerivedArrIncludes4() {
    set(this, 'derivedArrIncludes4', this.derivedArr.includes(4));
  }

  @action
  addToArr() {
    this.myArr.pushObject({ val: this.myArr.length });
  }

  @action
  removeFromArr() {
    this.myArr.popObject();
  }
}

templates.application\.hbs

<p>
  <button {{on "click" this.addToArr}}>Add to arr</button>
  <button {{on "click" this.removeFromArr}}>Remove from arr</button>
</p>
<p>
  myArr length: {{this.myArr.length}}
</p>
<p>
  Derived arr includes 4: {{this.derivedArrIncludes4}}
</p>

twiddle\.json

{
  "version": "0.16.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.14.3",
    "ember-template-compiler": "3.14.3",
    "ember-testing": "3.14.3"
  },
  "addons": {
    "ember-data": "3.14.1",
    "ember-decorators": "6.1.1"
  }
}