JSFiddle - React, Tailwind, and code Playground

by Jaak Kütt

HTML

<span> str: <span data-bind="text: Strength"></span> / 100 </span>
<br>
<span> str: <span data-bind="text: really_use_computed"></span> / 100 </span>
<br>
<button id="levelup">levelup</button>

JavaScript

function ViewModel() {
    var self = this;
    self.level=ko.observable(5);
    
    self.really_use_computed = ko.computed(function() {
        return self.level() * 2;
    });
}

var MyViewModel=new ViewModel();

Object.defineProperty(MyViewModel, "Strength", {
    get: function () {
        return this.level() * 2;
    },
    enumerable: true
});

ko.applyBindings(MyViewModel);

var button=document.getElementById('levelup');
button.onclick=function(){
    var currentlevel=MyViewModel.level();
    MyViewModel.level(currentlevel+1);
}