JSFiddle - React, Tailwind, and code Playground

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"
        @click.native="select(arrItem, tagItem.id)"
      >
      </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		 
      };
    }
  },
  template: "<div class='smthTag' v-bind:class='isSelected'>\
<div class='inner'>\
<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
    }
  },
  template: "<div class='smthGroup' v-bind:class='[styleclass]'>\
<div>\
<div class='title'>\
{{title}}, ({{choosen}},  {{selected}})\
</div>\
</div>\
<div class='flexContent'>\
<slot></slot>\
</div>\
</div>"
});

Vue.component('smth', {
  template: '<div class="smth">\
<slot></slot>\
</div>'
});


var player = new Vue({
  el: '#app',
  data: {
    arr: [
      {
        id: "1",
        title: "List1",
        selectedTagId: "12",
        tags: [
          {
            id: "11",
            title: "Item1"
          },
          {
            id: "12",
            title: "Item2"
          },
          {
            id: "13",
            title: "Item3"
          }
        ]
      },
      {
        id: "2",
        title: "List2",
        selectedTagId: "21",
        tags: [
          {
            id: "21",
  ...