JSFiddle - React, Tailwind, and code Playground

HTML

<div id="resultComponent" data-toggler=".small-up-2" class="row small-up-1">
  <div class="box1 box" v-if="redShow"> </div>
  <div class="box2 box" v-if="yellowShow"> </div>
  <div class="box3 box" v-if="greenShow"> </div>
  {{productSelected}}
  <list-products :products="listProducts" @clicked-show-detail="clickedShowDetailModal"></list-products>
</div>

<template id="list-products-template">
  <div>
    <div class="column column-block" v-for="(product, index) in products" :product="product" :index="index" :key="product.id">
    <li class="more-benefits">
        <a @click="showDetailModal(product)">{{ product.color }}</a>
    </li>
    </div>
  </div>
</template>

CSS

.box{
  width:100px;
  height:100px;
}
.box1{
  background:red;
}
.box2{
  background:yellow;
}
.box3{
  background:green;
}

JavaScript

console.clear()
Vue.component('list-products', {
  //delimiters: ['[[', ']]'],
  template: '#list-products-template',
  props: ['products'],
  data: function () {
    return {
      productSelected: {}
    }
  },
  methods: {
    showDetailModal: function (product) {
    	console.log('click product in child, how can i pass this product to productSelected data in parent?');
      console.log(product);
      this.productSelected = product;
      this.$emit('clicked-show-detail', product);
    }
  }
});


var app = new Vue({
  //delimiters: ['[[', ']]'],
  el: '#resultComponent',
  data: {
    listProducts: [
      	{'name':'test1',id:1, color:"red"},
        {'name':'test2',id:2, color:"yellow"},
        {'name':'test3',id:3, color:"green"}
    ],
    redShow:false,
    yellowShow:false,
    greenShow:false,
    productSelected: {}
  },
  methods: {
    clickedShowDetailModal: function (value) {
      console.log('value');
      console.log(value);
      this.productSelected = value.color
      this.redShow = value.color === "red";
      this.yellowShow = value.color === "yellow";
      this.greenShow = value.color === "green";
    }
  }
});