Uncaught TypeError: Cannot assign to read only property 'foostate' of object '[object Object]'

[wynnerd]

I've been trying to use Ember Parachute with [email protected] and [email protected] with ES6 classes and decorators. The decorator form does not seem to work and complains about the property being read only.

Controller:

import { action } from '@ember/object';
import { queryParam } from 'ember-parachute/decorators';

export default class FooController extends Controller {
  @queryParam({
    as: "foo",
    serialize(value) {
      return value;
    },
    deserialize(value) {
      return value;
    }
  })
  foostate = "my state";

  @action
  updateState() {
    this.foostate = "my new state";
  }
}

Template:

{{page-title "Foo"}}

<button {{on "click" (action "updateState")}}>
  Update state
</button>
{{outlet}}

When I click the button I am returned the error

   at FooController.updateState (foo.js:38)
   at Backburner._run (backburner.js:1013)
   at Backburner._join (backburner.js:989)
   at Backburner.join (backburner.js:760)
   at join (index.js:168)
   at index.js:770
   at instrument (index.js:144)
   at index.js:769
   at Proxy.<anonymous> (index.js:727)

It doesn't seem to reach the serialize / deserialize methods at all, and fails at the point of trying to update the value.

I have also tried adding @tracked into the mix, but this still returns the same error. Hopefully I'm doing something wrong, but I can't see where.

Thanks in advance.