title: vue 2 @click handler not working as expected
body: <p>I have a "card" component with many "faces".<br>
  Click the card and it shows another face.</p>
  
  <pre><code>&lt;template lang="pug"&gt;
    .infini-card(@click.prevent="clickCard")
      infini-card-empty(v-if="face==='empty'")
      infini-card-secret(v-if="face==='secret'" v-bind="cardData")
      infini-card-reveal(v-if="face==='reveal'" v-bind="cardData")
  &lt;/template&gt;
  </code></pre>
  
  <p>The ".infini-card" div has a click handler and I can do a switch() there to process changes for all the different kinds of faces.  Cool.</p>
  
  <p>But, the first thing I tried didn't work:</p>
  
  <pre><code>&lt;template lang="pug"&gt;
    .infini-card
      infini-card-empty(v-if="face==='empty'")
      infini-card-secret(v-if="face==='secret'" v-bind="cardData" @click.prevent="clickSecret")
      infini-card-reveal(v-if="face==='reveal'" v-bind="cardData")
  &lt;/template&gt;
  </code></pre>
  
  <p>The clickSecret() method is never called on the v-if'd face.  This component is instantiated in another pug template like this: <code>infini-card(v-bind.sync="cardA")</code></p>
  
  <p>Why?  :-)</p>
  
  <p>Thanks in advance!</p>