bug in ember-yeti-table if dynamically rendering

controllers.application\.js

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';

export default class ApplicationController extends Controller {
  data = [
    { name: 'Max', city: 'Berlin' },
    { name: 'Karl', city: 'San Francisco' },
    { name: 'Anita', city: 'Tokyo' },
    { name: 'Luisa', city: 'Nairobi' }
  ];

  @tracked cityFilter = null;
  @tracked nameFilter = null;

  @tracked showCityColumn = true;
}

templates.application\.hbs

<button
  {{on "click" (action (mut this.showCityColumn) (if this.showCityColumn false true))}}
>
  {{#if this.showCityColumn}}hide{{else}}show{{/if}} city column
</button>

<h1>Simple example</h1>
<YetiTable @data={{this.data}} as |table|>
  <table.header as |header|>
    <header.column @prop="name">
      Name
    </header.column>
     
    {{#if this.showCityColumn}}
      <header.column @prop="city">
        City
      </header.column>
    {{/if}}
  </table.header>

  <table.body/>
</YetiTable>

<h1>With Filter</h1>
<YetiTable @data={{this.data}} as |table|>

  <table.thead as |head|>
    <head.row as |row|>
      <row.column @prop="name" @filter={{this.nameFilter}}>
        Name
      </row.column>
      {{#if this.showCityColumn}}
        <row.column @prop="city" @filter={{this.cityFilter}}>
          City
        </row.column>
      {{/if}}
    </head.row>

    <head.row as |row|>
      <row.cell>
        <input
          type="search"
          placeholder="Search name"
          value={{this.nameFilter}}
          {{on "input" (action (mut this.nameFilter) value="target.value")}}
        >
      </row.cell>
     {{#if this.showCityColumn}}
        <row.cell>
          <input
            type="search"
            placeholder="Search city"
            value={{this.cityFilter}}
            {{on "input" (action (mut this.cityFilter) value="target.value")}}
          >
        </row.cell>
      {{/if}}
    </head.row>
  </table.thead>

  <table.body/>

</YetiTable>

<h1>With custom body and filter</h1>
<YetiTable @data={{this.data}} as |table|>

  <table.thead as |head|>
    <head.row as |row|>
      <row.column @prop="name" @filter={{this.nameFilter}}>
        Name
      </row.column>
      {{#if this.showCityColumn}}
        <row.column @prop="city" @filter={{this.cityFilter}}>
          City
        </row.column>
      {{/if}}
    </head.row>

    <head.row as |row|>
      <row.cell>
        <input
          type="search"
          placeholder="Search name"
          value={{this.nameFilter}}
          {{on "input" (action (mut this.nameFilter) value="target.value")}}
        >
      </row.cell>
     {{#if this.showCityColumn}}
        <row.cell>
          <input
            type="search"
            placeholder="Search city"
            value={{this.cityFilter}}
            {{on "input" (action (mut this.cityFilter) value="target.value")}}
          >
        </row.cell>
      {{/if}}
    </head.row>
  </table.thead>

  <table.body as |body person|>
    <body.row as |row|>
      <row.cell>
        {{person.name}}
      </row.cell>
      {{#if this.showCityColumn}}
        <row.cell>
          {{person.city}}
        </row.cell>
      {{/if}}
    </body.row>
  </table.body>

</YetiTable>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-yeti-table": "1.5.2"
  }
}