import Component from '@ember/component';
import { inject as service } from '@ember/service';

import { task } from 'ember-concurrency';

export default class CommentsList extends Component {
  tagName = '';

  @service account;
  @service ajax;

  addCommentText = '';

  @(task(function* () {
    let id = this.flightId;
    let text = this.addCommentText;
    let user = this.get('account.user');

    yield this.ajax.request(`/api/flights/${id}/comments`, { method: 'POST', json: { text } });

    this.set('addCommentText', '');
    this.comments.pushObject({ text, user });
  }).drop())
  addCommentTask;
}

import Component from '@ember/component';
import { inject as service } from '@ember/service';

import { tracked } from '@glimmer/tracking';
import { task } from 'ember-concurrency';

export default class CommentsList extends Component {
  tagName = '';

  @service account;
  @service ajax;

  @tracked addCommentText = '';

  @(task(function* () {
    let id = this.flightId;
    let text = this.addCommentText;
    let user = this.get('account.user');

    yield this.ajax.request(`/api/flights/${id}/comments`, { method: 'POST', json: { text } });

    this.addCommentText = '';
    this.comments.pushObject({ text, user });
  }).drop())
  addCommentTask;
}

Use `@tracked` property instead of `this.set()`
CommentsList: Use `@tracked` property instead of `this.set()`
