title: How to bubble up a click event from a custom component in vue.js?
body: <p>I have a custom component <code>&lt;item&gt;</code> which looks like this:</p>
  <p><strong>item.vue</strong></p>
  <pre><code>&lt;script&gt;
    export default {
      render: function (c) {
        var self = this;
        const contentEl = c('div', {staticClass:'item-content', domProps: {innerHTML: self.content}});
        return c('div', {
          staticClass: 'item',
          class: {
            'item-left': self.side === 'left',
            'item-right': self.side === 'right'
          }
        }, [contentEl])
      },
      props: {
        content: String,
      }
    }
  &lt;/script&gt;
  </code></pre>
  <p>It can be used like this:</p>
  <pre><code>&lt;item :content=&quot;Hello world&quot;&gt;&lt;/item&gt;
  </code></pre>
  <p>This will print &quot;Hello world&quot; and works fine but now I want the item to be clickable like this:</p>
  <pre><code>&lt;item v-on:click=&quot;myClickEvent&quot; :content=&quot;Hello world&quot;&gt;&lt;/item&gt;
  </code></pre>
  <p><strong>Question:</strong></p>
  <p>How can I make the <code>&lt;item&gt;</code> component to fire a click event when its inner <code>&lt;div&gt;</code> was clicked?</p>