JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<a href="#" onclick="outputJson();">Click here for output Json</a>
 <a href="#" onclick="reloadData();">Click here to load old data</a>
</br>
 
    <input type="text" data-bind="value:firstName" />
    <input type="text" data-bind="value:lastName" />
    <span data-bind="text:fullName"></span>

JavaScript

var updatedData = [];
        var viewModel = {
            myviewmodel: ko.observable().extend({noitfy:'always'})
        };
        function appViewModel() {
            var self = this;
            self.firstName = ko.observable('Bob');
            self.lastName = ko.observable('Smith');
            self.fullName = ko.computed(function () {
                return self.firstName() + " " + self.lastName();
            });
        }
        viewModel.myviewmodel(new appViewModel());
                
        $(function () {
            ko.applyBindings(viewModel.myviewmodel);
        });
        function outputJson() {
           var unmapped = ko.mapping.toJS(viewModel.myviewmodel);
           updatedData.push(unmapped);
           viewModel.myviewmodel(new appViewModel());
        }
        function reloadData() {
            viewModel.myviewmodel(ko.mapping.fromJS(updatedData[0]));
        }