JSFiddle - React, Tailwind, and code Playground

HTML

<script id='template' type='text/ractive'>
    <tweedle dee="{{dee}}" dum='{{dum}}'/>
</script>

<script id='tweedle' type='text/ractive'>
    {{ dee ? dee : 'lewis'}} {{dum ? dum : 'carroll'}}
</script>

JavaScript

var ractive = new Ractive({
    el: document.body,
    template: '#template',
    data: {
        dee: '',
        dum: ''
    },
    components: {
        tweedle: Ractive.extend({ template: '#tweedle' })
    },
    oninit: function(){
        this.observe('crow', function(n){
            if(!n){
                this.set({
                    dee: 'spoiled',
                    dum: 'rattle'
                })
            } else {
                 this.set({
                    dee: 'forget',
                    dum: 'quarrel'
                })           
            }
        })
    }
})

ractive.set('crow', true)