JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.7.3/riot.min.js"></script>
<div class="outer">
  OUTER MODEL { outerModel }
  <div class="inner" data-is="inner">
    INNER MODEL { innerModel }
    <div>
      <select onchange="{ doChange }">
        <option value=0>0</option>
        <option value=1>1</option>
      </select>
    </div>
  </div>
</div>

JavaScript

var outer = riot.tag('outer', false, function(opts) {
	this.outerModel = 'OUTER';

	this.doChange = function(event) {
  	this.update({
    	outerModel: 'UPDATED'
    })
  }
});

var inner = riot.tag('inner', false, function(opts) {
	this.innerModel = 'INNER';

	this.doChange = function(event) {
  	this.update({
    	innerModel: 'UPDATED'
    })
  }
});
riot.mount('.outer', outer);