JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    	<h2>atomic</h2>

    <input data-bind="value: firstName" style="display:block" />
    <input data-bind="value: lastName" style="display:block" />
    <input data-bind="value: phoneNos" style="display:block" />
    <input data-bind="value: address" style="display:block" />
    	<h2>computed</h2> 

    <input data-bind="value: fullDetail().firstName" style="display:block" />
    <input data-bind="value:fullDetails().lastName" style="display:block" />
    <input data-bind="value: fullDetails().phoneNos" style="display:block" />
    <input data-bind="value: fullDetails().address" style="display:block" />
</div>

JavaScript

var vm = function PersonViewModel() {
    var self = this;
    //atomic observables
    this.firstName = ko.observable("");
    this.lastName = ko.observable("");
    this.phoneNos = ko.observable(0);
    this.address = ko.observable("");
    //compute function for fullDetails
    this.computeFullDetails = function () {
        retObj = {};
        retObj.firstName = ko.observable(this.firstName());
        retObj.lastName = ko.observable(this.lastName());
        retObj.phoneNos = ko.observable(this.phoneNos());
        retObj.address = ko.observable(this.address());
        return retObj;
    };
    //function for execute after computed observable is written	
    this.writeToComponents = function (value) {
        this.firstName(value.firstName());
        this.lastName(value.lastName());
        this.phoneNos(value.phoneNos());
        this.address(value.address());
    };


    this.fullDetails = ko.computed({
        read: this.computeFullDetails,
        write: this.writeToComponents,
    }, this);
};
ko.applyBindings(new vm);