How to use the aurelia-binding.computedFrom function in aurelia-binding

bindable
    ], UxRadio.prototype, "effect", void 0);
    __decorate([
        bindable
    ], UxRadio.prototype, "id", void 0);
    __decorate([
        bindable
    ], UxRadio.prototype, "theme", void 0);
    __decorate([
        observable({ initializer: function () { return false; } })
    ], UxRadio.prototype, "value", void 0);
    __decorate([
        observable()
    ], UxRadio.prototype, "focused", void 0);
    __decorate([
        computedFrom('disabled')
    ], UxRadio.prototype, "isDisabled", null);
    UxRadio = __decorate([
        inject(Element, StyleEngine),
        customElement('ux-radio')
    ], UxRadio);
    return UxRadio;
}());
export { UxRadio };

aurelia_templating_1.bindable
    ], UxCheckbox.prototype, "id", void 0);
    __decorate([
        aurelia_templating_1.bindable
    ], UxCheckbox.prototype, "theme", void 0);
    __decorate([
        aurelia_binding_1.observable()
    ], UxCheckbox.prototype, "checked", void 0);
    __decorate([
        aurelia_binding_1.observable()
    ], UxCheckbox.prototype, "value", void 0);
    __decorate([
        aurelia_binding_1.observable()
    ], UxCheckbox.prototype, "focused", void 0);
    __decorate([
        aurelia_binding_1.computedFrom('disabled')
    ], UxCheckbox.prototype, "isDisabled", null);
    UxCheckbox = __decorate([
        aurelia_dependency_injection_1.inject(Element, core_1.StyleEngine),
        aurelia_templating_1.customElement('ux-checkbox')
    ], UxCheckbox);
    return UxCheckbox;
}());
exports.UxCheckbox = UxCheckbox;

aurelia_templating_1.bindable
    ], UxRadio.prototype, "effect", void 0);
    __decorate([
        aurelia_templating_1.bindable
    ], UxRadio.prototype, "id", void 0);
    __decorate([
        aurelia_templating_1.bindable
    ], UxRadio.prototype, "theme", void 0);
    __decorate([
        aurelia_binding_1.observable({ initializer: function () { return false; } })
    ], UxRadio.prototype, "value", void 0);
    __decorate([
        aurelia_binding_1.observable()
    ], UxRadio.prototype, "focused", void 0);
    __decorate([
        aurelia_binding_1.computedFrom('disabled')
    ], UxRadio.prototype, "isDisabled", null);
    UxRadio = __decorate([
        aurelia_dependency_injection_1.inject(Element, core_1.StyleEngine),
        aurelia_templating_1.customElement('ux-radio')
    ], UxRadio);
    return UxRadio;
}());
exports.UxRadio = UxRadio;

bindable
], UxCheckbox.prototype, "theme", void 0);
__decorate([
    bindable({ defaultBindingMode: bindingMode.twoWay }),
    bindable
], UxCheckbox.prototype, "checked", void 0);
__decorate([
    bindable({ defaultBindingMode: bindingMode.twoWay }),
    bindable
], UxCheckbox.prototype, "value", void 0);
__decorate([
    bindable({ defaultBindingMode: bindingMode.twoWay }),
    bindable
], UxCheckbox.prototype, "uncheckedValue", void 0);
__decorate([
    computedFrom('disabled')
], UxCheckbox.prototype, "isDisabled", null);
UxCheckbox = __decorate([
    inject(Element, ViewResources, StyleEngine),
    customElement('ux-checkbox'),
    processAttributes(processDesignAttributes)
], UxCheckbox);
export { UxCheckbox };

bindable
], UxRadio.prototype, "effect", void 0);
__decorate([
    bindable
], UxRadio.prototype, "id", void 0);
__decorate([
    bindable
], UxRadio.prototype, "theme", void 0);
__decorate([
    observable({ initializer: () => false })
], UxRadio.prototype, "value", void 0);
__decorate([
    observable()
], UxRadio.prototype, "focused", void 0);
__decorate([
    computedFrom('disabled')
], UxRadio.prototype, "isDisabled", null);
UxRadio = __decorate([
    inject(Element, StyleEngine),
    customElement('ux-radio')
], UxRadio);
export { UxRadio };
function stopEvent(e) {
    e.stopPropagation();
}
const getVm = (_) => _.au.controller.viewModel;
const uxRadioElementProto = Object.create(HTMLElement.prototype, {
    type: {
        value: 'radio',
    },
    checked: {
        get() {

@bindable({
		defaultBindingMode: bindingMode.twoWay
	}) value: string;
	@bindable label: string;
	@bindable disabled: boolean | string = false;
	@bindable color: string;
	@bindable type: InputType = inputType.text;
	@bindable placeholder: string | undefined;
	@bindable help: string | undefined;
	@bindable modifier: string | undefined;

	controlId: string;
	modifiers: string | undefined;
	isFocused = false;

	@computedFrom("value", "placeholder", "isFocused")
	get isActive(): boolean {
		return !!this.value || !!this.placeholder || this.isFocused;
	}

	private input: HTMLInputElement;
	private config: InputConfig;
	private logger: ILog;

	constructor(
		loggerFactory: LoggerFactory,
		private element: Element,
	) {
		this.logger = loggerFactory.get("inputElement");
		this.controlId = `${PREFIX}-${InputElement.id++}`;
	}

@bindable textField: string;
	@bindable valueField: string;
	@bindable groupby: string | undefined;

	controlId: string;
	modifiers: string | undefined;
	labelModifierClass: string | undefined;
	isOpen = false;
	arrowUpIcon: string;
	arrowDownIcon: string;
	clearIcon: string;
	filterBy: string;
	filteredGroupOptions: SelectGroup[] = [];
	focusValue: string | undefined = undefined;

	@computedFrom("isOpen", "selectedItems")
	get isActive(): boolean {
		return this.isOpen || this.selectedItems.length > 0;
	}

	private logger: ILog;
	private config: SelectConfig;
	private items: SelectItem[];
	private selectedItems: SelectItem[] = [];
	private flattenedFilteredGroupOptions: SelectItem[];
	private optionsMap: Dictionary = {};
	private isComplexList: boolean;

	private focusedController: ElementFocusedController;
	private focus$$: Subscription;
	private input$$: Subscription;

}

function _initializerWarningHelper(descriptor, context) {
  throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.');
}

import { PLATFORM } from 'aurelia-pal';
import { inject } from 'aurelia-dependency-injection';
import { bindingMode, computedFrom } from 'aurelia-binding';
import { bindable, customElement } from 'aurelia-templating';
import { resolvedView } from 'aurelia-view-manager';
import { EntityManager } from 'aurelia-orm';
import { Router } from 'aurelia-router';
import { Homefront } from 'homefront';

export let DataTable = (_dec = customElement('datatable'), _dec2 = resolvedView('spoonx/datatable', 'datatable'), _dec3 = inject(Router, Element, EntityManager), _dec4 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec5 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec6 = computedFrom('columnLabels', 'hasVisibleActions', 'detailView'), _dec7 = computedFrom('columns'), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class DataTable {

  constructor(router, element, entityManager) {
    _initDefineProp(this, 'criteria', _descriptor, this);

    _initDefineProp(this, 'where', _descriptor2, this);

    _initDefineProp(this, 'limit', _descriptor3, this);

    _initDefineProp(this, 'columns', _descriptor4, this);

    _initDefineProp(this, 'searchColumn', _descriptor5, this);

    _initDefineProp(this, 'actions', _descriptor6, this);

    _initDefineProp(this, 'searchable', _descriptor7, this);

private today = new Date();

  constructor(public element: Element, public resources: ViewResources) {
    this.today.setHours(0, 0, 0, 0);
  }

  public attached() {
    this.scrollToActive();
  }

  public selectYear(year: number) {
    this.value = this.value.clone().set('year', year);
  }

  @computedFrom('minDate', 'maxDate')
  public get yearList() {
    const yearList: number[] = [];
    let min = 1900;
    let max = 2100;

    if (this.minDate) {
      min = this.minDate.year();
    }

    if (this.maxDate) {
      max = this.maxDate.year();
    }

    while (min <= max) {
      yearList.push(min);