Aurelia Grid Column Render Issue

app.html

<template>
    <require from="./grid"></require>
    <require from="./grid-column"></require>
    <h2>Grid Test</h2>
    <div style="margin-bottom: 20px;">
        <button type="button" click.delegate="toggleNameColumn()">${buttonText}</button>
    </div>
    <grid items.bind="customers" grid.ref="customerGrid">
        <grid-column field="id" title="ID"></grid-column>
        <grid-column field="name" title="NAME"></grid-column>
        <grid-column field="state" title="STATE"></grid-column>
    </grid>
</template>

app.js

import {CompositionEngine, CompositionContext, ViewSlot} from 'aurelia-templating';
import {customElement, containerless, computedFrom, inject, declarePropertyDependencies, Container} from "aurelia-framework";
import {Origin} from 'aurelia-metadata'
import {Grid} from './grid';

@inject( Element)
export class Main {
    customers = [];
    customerGrid: Grid;
    buttonText = "Hide Name";
    constructor() {
        let c = [];
        c.push({id: 1, name: "Jake", state: "IL"});
        c.push({id: 2, name: "Eric", state: "NY"});
        c.push({id: 3, name: "Chris", state: "NH"});
        this.customers = c;
    }
    toggleNameColumn() {
        this.customerGrid.columns[1].show = !this.customerGrid.columns[1].show;
        this.buttonText = this.customerGrid.columns[1].show ? "Hide Name" : "Show Name";
    }
}

grid-column-renderer.js

import {inject, customElement, children, bindable, ViewCompiler, ViewFactory,
    ViewResources, Container, ViewSlot, noView, inlineView, containerless} from 'aurelia-framework';
import {GridColumn} from "./grid-column";
@customElement("column-renderer")
@containerless()
@noView()
@inject(Element, ViewCompiler, ViewResources, Container, ViewSlot)
export class GridColumnTransclude {
    @bindable $$item = {};
    @bindable column;
    view = null;
    cellSlot: ViewSlot;
    constructor(element: Element,
                viewComplier, 
                viewResources, 
                container, 
                viewSlot) {
            this.viewComplier = viewComplier;
            this.viewResources = viewResources;
            this.container = container;
            this.viewSlot = viewSlot;
    }
    attached(parentElement) {
        let context = this.column.bindingContext;
        this.view = this.column.viewFactory.create(this.container);
        this.view.bind(this, context);
        let index = this.column.grid.columns.indexOf(this.column);
        this.viewSlot.add(this.view);
        this.viewSlot.attached();
    }
    detached() {
        this.viewSlot.detached();
        this.viewSlot.remove(this.view);
        this.view.unbind();
    }
}

grid-column.js

import {customElement, bindable, inject, ViewFactory, ViewCompiler, ViewResources, inlineView} from 'aurelia-framework';
import {Grid} from "./grid";

@inject(Element, Grid, ViewCompiler, ViewResources)
@customElement("grid-column")
@inlineView('<template><slot></slot></template>')
export class GridColumn {
    @bindable field;
    @bindable title;
    @bindable show = true;
    bindingContext;
    viewFactory;
    constructor(element, grid, viewCompiler, viewResources) {
        this.element = element;
        this.grid = grid;
        this.viewCompiler = viewCompiler;
        this.viewResources = viewResources;
        let innerHtml = element.innerHTML;
        if (innerHtml.trim() == "") {
            let fieldName = element.getAttribute("field");
            if (fieldName)
                innerHtml = `$\{$$item.${fieldName}}`;
        }
        let template = `<template><label>${innerHtml}</label></template>`;
        this.viewFactory = viewCompiler.compile(template, viewResources);
    }
    bind(bindingContext) {
        this.bindingContext = bindingContext;
    }
    //showChanged(mew, old) {
    //    if (mew == "true") this.show = true;
    //    if (mew == "false") this.show = false;
    //}
}

grid.html

<template>
    <require from="./grid-column-renderer"></require>
    <div>
        <label repeat.for="column of internalColumns">
            ${column.title}
        </label>
    </div>
    <div repeat.for="item of items">
        <label as-element="column-renderer" repeat.for="column of internalColumns" $$item.bind="item" column.bind="column"></label>
    </div>
    <slot></slot>
</template>

grid.js

import {inject, customElement, children, bindable, BindingEngine, Disposable} from 'aurelia-framework';
import {GridColumn} from "./grid-column";
@inject(Element, BindingEngine)
@customElement("grid")
export class Grid {
    @children("grid-column") columns;
    @bindable items = [];
    internalColumns;
    subscriptions;
    constructor(element, bindingEngine) {
        this.element = element;
        this.bindingEngine = bindingEngine;
    }
    attached() {
        this.internalColumns = this.columns.filter(c => c.show == true);
        this.subscriptions = this.columns.map(c => this.bindingEngine.propertyObserver(c, "show").subscribe((mew, old) => {
            this.internalColumns = this.columns.filter(c => c.show == true);
        }));
    }
    detached() {
        this.subscriptions.forEach(s => s.dispose());
    }
}

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        label {
            display: inline-block;
            width: 50px;
            border: 1px solid #ddd;
        }
    </style>
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>
    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>