title: Vue JS click event not firing up
body: <p>I'm developing app where I have a dynamic <code>.ddlist</code> for each <code>.box</code>.</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;h2&gt;MY LIST&lt;/h2&gt;
  
    &lt;div class="box"&gt;
      &lt;input v-on:focus="showDDList" v-on:blur="showDDList" type="text" value="" placeholder="hello list"&gt;
      &lt;ul class="ddlist"&gt;
        &lt;li @click.prevent="myalert()" v-for="item in hello"&gt;&lt;a href=""&gt;{{item.text}}&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
   &lt;div class="box"&gt;
      &lt;input v-on:focus="showDDList" v-on:blur="showDDList" type="text" value="" placeholder="there list"&gt;
      &lt;ul class="ddlist"&gt;
        &lt;li @click.prevent="myalert()" v-for="item in there"&gt;&lt;a href=""&gt;{{item.text}}&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>What I want to achieve is when user focus on <code>input</code>, very next <code>.ddlist</code> should be visible. Here is Javascript part :</p>
  
  <pre><code>new Vue({
    el: "#app",
    data: {
      hello: [
        { text: "hello 1" },
        { text: "hello 2" },
        { text: "hello 3" },
        { text: "hello 4" }
      ],
      there: [
        { text: "there 1" },
        { text: "there 2" },
        { text: "there 3" },
        { text: "there 4" }
      ]
    },
    methods: {
      showDDList: function(e) {
              e.target.nextElementSibling.classList.toggle('active');
          },
      myalert: function() {
              alert("Hello world");
          },
  
    }
  })
  </code></pre>
  
  <p>My code is working fine until here and <code>.ddlist</code> does show up on focusing on <code>input</code></p>
  
  <p>What Next I want to do is When a user clicks on <code>.ddlist</code> child <code>a</code>, It should fire @click event binded to it.</p>
  
  <p>There is a problem. Now when user clicks on <code>a</code> nothing shows up.
  What I notice is because I'm toggling with css <code>display:block/none</code> of <code>.ddlist</code>, @click event is not firing up.</p>
  
  <p>Here is the working fiddle : <a href="https://jsfiddle.net/6y9mwh3u/" rel="nofollow noreferrer">https://jsfiddle.net/6y9mwh3u/</a></p>
  
  <p>May be you can throw some light on achieving my result with alternative ?</p>