title: Pass data from child to parent in Vuejs (is it so complicated?)
body: <p>Thanks for reading my question.</p>
  <p>I have read about it:</p>
  <p><a href="https://stackoverflow.com/questions/40915436/vuejs-update-parent-data-from-child-component">vuejs update parent data from child component</a></p>
  <p><a href="https://forum.vuejs.org/t/passing-data-back-to-parent/1201/2" rel="noreferrer">https://forum.vuejs.org/t/passing-data-back-to-parent/1201/2</a></p>
  <p>The concept is the same, I need to pass a data object from child to parent. I have used <code>$emit</code> to pass data to parent component but it doesn't works. Do you know what is wrong? You can check my code here:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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('clickedShowDetailModal', product);
      }
    }
  });
  
  
  var app = new Vue({
    delimiters: ['[[', ']]'],
    el: '#resultComponent',
    data: {
      listProducts: [
          {'name':'test1',id:1},
          {'name':'test2',id:2},
          {'name':'test3',id:3}
      ],
      productSelected: {}
    },
    methods: {
      clickedShowDetailModal: function (value) {
        console.log('value');
        console.log(value);
        this.productSelected = value;
      }
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/vue/dist/vue.js"&gt;&lt;/script&gt;
  
  &lt;div id="resultComponent" data-toggler=".small-up-2" class="row small-up-1"&gt;
    &lt;list-products :products="listProducts"&gt;&lt;/list-products&gt;
  &lt;/div&gt;
  
  &lt;script type="text/x-template" id="list-products-template"&gt;
    &lt;div&gt;
      &lt;div class="column column-block" v-for="(product, index) in products" :product="product" :index="index" :key="product.id"&gt;
      &lt;li class="more-benefits"&gt;
          &lt;a @click="showDetailModal(product)"&gt;Click me [[ product.name ]] and check console.log »&lt;/a&gt;
      &lt;/li&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Thanks in advance.</p>