JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive/0.7.3/ractive.min.js"></script>
<div id="app"></div>

<script>
window.__APP_INITIAL_STATE__ = {
    widgets: [
        {id: 1, name: "First widget", x:0, y:0, width:2, height:2},
        {id: 2, name: "Second widget", x:5, y:0, width:2, height:2},
        {id: 3, name: "Third widget", x:10, y:0, width:2, height:2},
    ],
};
</script>

CSS

.grid-stack {
            background: lightgoldenrodyellow;
        }

        .grid-stack-item-content {
            color: #2c3e50;
            text-align: center;
            background-color: #18bc9c;
        }

JavaScript

var gridstackDecorator = function gridstackDecorator( node, content ) {
    console.log('new decorator', node, content);

    var $gridstack;
    var $gridstackEl;

    var options = {
        cellHeight: 80,
        verticalMargin: 10,
        height:20,
    };

    $gridstackEl = $(node);
    $gridstackEl.gridstack(options);
    $gridstack = $gridstackEl.data('gridstack');

    $gridstackEl.on('change', function () {
        console.log("change");
        serialize();
    });


    function serialize() {
        var result = _.map($('.grid-stack .grid-stack-item:visible'), function (el) {
            el = $(el);
            var node = el.data('_gridstack_node');
            return {
                id: el.attr('data-custom-id'),
                x: node.x,
                y: node.y,
                width: node.width,
                height: node.height
            };
        });

        return result;
    }


    return {
        update(x,y,z) {
            // NEVER EXECUTES
            console.log("update",x,y,z);
        },
        teardown(x,y,z) {
        		// NEVER EXECUTES
            console.log("teardown",x,y,z);
            $gridstack.destroy();
        }
    };
};

var Widget = Ractive.extend({
    isolated: true,
    template: `<div class="grid-stack-item" data-gs-x="{{x}}" data-gs-y="{{y}}" data-gs-width="{{width}}" data-gs-height="{{height}}">
    <div class="grid-stack-item-content">
        {{id}}-{{name}} (x: {{x}}, y: {{y}})<a href="#" on-click="@this.fire('deleteWidget', event, id)">Xxx</a>
    </div>
</div>`,
    oninit() {
    },
    onrender() {
        console.log("render");
    },
    data: {
        x:10,
        y:10,
        width:100,
        height:100,
    }
})

var Dashboard = Ractive.extend({
    isolated: true,
    components: {
        Widget
    },
    decorators: {
        gridstack: gridstackDecorator
    },

    oninit() {
    },

    deleteWidget(id) {
			console.log("deleteWidget", id);
    },

    addWidget(name) {
     ...