JSFiddle - React, Tailwind, and code Playground

by Tenebrius

HTML

<div id='app'>
  <smth>
    <smth-group
      v-for="arrItem in arr"
      v-bind:key="arrItem.id"
      v-bind:choosen="arrItem.selectedTagId"
      v-bind:title="arrItem.title">
      <smth-tag
        v-for="tagItem in arrItem.tags" 
		    v-bind:choosen="arrItem.selectedTagId"
        v-bind:key="tagItem.id"
        v-bind:id="tagItem.id"
        v-bind:title="tagItem.title">        
      </smth-tag>
    </smth-group>
  </smth>
  </div>

CSS

.smth{
  border: red 1px solid;
  padding: .5em;
  margin: .5em;
 
}
.smthGroup{
  border: green 1px solid;
  padding: .5em;
  margin: .5em;
}
.smthTag{
  border: blue 1px solid;
  padding: .5em;
  margin: .5em;
}

.active{
  background: silver;
}

JavaScript

Vue.component('smth-tag', {
    props: {
      title: {
        type: String,
        default: "заголовок"
      },
      id: {
        type: String
      },
      show_buttons: {
      	type: Boolean,
        default: true
      },
      show_settings: {
      	type: Boolean,
        default: false
      },
      isActive: {
      	type: Boolean,
        default: false
      },
      sources: {
        type: Array
      },
      selectedval: {
        type: String
      },
      val: {
        type: String
      },
      choosen: {
        type: String,
        default: "--"
      }
    },
    computed: {     
      isSelected: function() {
       return {
         active: this.id == this.choosen		 
       };
      }
    },
    methods: {
      toggleActive: function(val) {
		//this.choosen =  this.id;
       // alert("Active!");
      this.$bus.$emit('tagSelected', {title: this.title, key: this.id});
      }
    },
    template: "<div class='smthTag' v-bind:class='isSelected'>\
          <div class='inner' v-on:click='toggleActive'>\
            <div class='title'>{{title}} ({{choosen}})</div>\
            <b v-if='id == choosen'>selected item</b>\
          </div>\
        </div>"
  });

Vue.component('smth-group', {
    props: {
      title: {
        type: String,
        default: "заголовок"
      },
      choosen: {
        type: String,
        default: "-"
      },
      styleclass: {
        type: String,
        default: "заголовок"
      }
    },
	data: function() {
		return {
			selected: this.choosen
		}
	},
    mounted() {
      this.$bus.$on('tagSelected', this.selectTag);
    },
    destroyed() {
      this.$bus.$off('tagSelected')
    },
    methods: {
      selectTag: function(oData) {
		this.choosen = oData.key
        //alert(oData.key+" "+this.choosen);
        console.dir(oData);

      }
    },
    template: "<div class='smthGroup' v-bind:class='[styleclass]'>\
      <div>\
        <div class='title'>\
           {{title}}, ({{choosen}}, ...