HTML

<div data-component="counter">
    <div data-bind="count"></div>

    <button data-action="decrement">-</button>
    <button data-action="reset">Reset</button>
    <button data-action="increment">+</button>

    <label>Step: <input type="number" data-model="step" data-model-number></label>

    <div>Doubled: <span data-bind="doubled"></span></div>
    <div>Even? <span data-bind="isEven"></span></div>
</div>

JavaScript

wildflower.component('counter', {
    state: {
        count: 0,
        step: 1
    },
    computed: {
        doubled() { return this.count * 2; },
        isEven() { return this.count % 2 === 0 ? 'Yes' : 'No'; }
    },
    increment() { this.count += this.step; },
    decrement() { this.count -= this.step; },
    reset() { this.count = 0; }
});