<p dir="auto">As far I know, <a href="https://vuejs.org/v2/guide/events.html#Event-Modifiers" rel="nofollow">.once</a> would fire only one time.<br>
However, .once would <strong>fire multiple times</strong>, when the DOM is "<strong>not</strong>" the last binding DOM in template.</p>
<p dir="auto">For example,</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;button @click.once='doThis'&gt;btn#1&lt;/button&gt; &lt;!-- BUG: fire multiuple times!! --&gt;
&lt;button @click='doThis'&gt;btn#2&lt;/button&gt;"><pre class="notranslate"><code class="notranslate">&lt;button @click.once='doThis'&gt;btn#1&lt;/button&gt; &lt;!-- BUG: fire multiuple times!! --&gt;
&lt;button @click='doThis'&gt;btn#2&lt;/button&gt;
</code></pre></div>
<p dir="auto">while if I change the order of the two buttons, i.e.,</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;button @click='doThis'&gt;btn#1&lt;/button&gt; 
&lt;button @click.once='doThis'&gt;btn#2&lt;/button&gt; &lt;!-- fire only one time --&gt;"><pre class="notranslate"><code class="notranslate">&lt;button @click='doThis'&gt;btn#1&lt;/button&gt; 
&lt;button @click.once='doThis'&gt;btn#2&lt;/button&gt; &lt;!-- fire only one time --&gt;
</code></pre></div>
<p dir="auto">.once would has the expected behavior.</p>
<p dir="auto">For the same issue, I can't assign multiple .once listeners for multiple DOMs.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;button @click.once='doThis'&gt;btn#1&lt;/button&gt; &lt;!-- BUG: fire multiuple times!! --&gt;
&lt;button @click.once='doThat'&gt;btn#2&lt;/button&gt; &lt;!-- BUG: fire multiuple times!! --&gt;
&lt;button @click.once='doThis'&gt;btn#3&lt;/button&gt; &lt;!-- fire only one time --&gt;"><pre class="notranslate"><code class="notranslate">&lt;button @click.once='doThis'&gt;btn#1&lt;/button&gt; &lt;!-- BUG: fire multiuple times!! --&gt;
&lt;button @click.once='doThat'&gt;btn#2&lt;/button&gt; &lt;!-- BUG: fire multiuple times!! --&gt;
&lt;button @click.once='doThis'&gt;btn#3&lt;/button&gt; &lt;!-- fire only one time --&gt;
</code></pre></div>
<p dir="auto">I was wondering this is a feature or bug.<br>
Thank you.</p>

<h3 dir="auto">Vue.js version</h3>
<p dir="auto">2.1.8 (latest)<br>
MAC OS 10.11 + Chrome 55</p>
<h3 dir="auto">Reproduction Link</h3>
<ol dir="auto">
<li>
<p dir="auto">order cause .once fail<br>
<a href="https://jsfiddle.net/ignoreswing/q90uox65/" rel="nofollow">https://jsfiddle.net/ignoreswing/q90uox65/</a></p>
</li>
<li>
<p dir="auto">Can't use multiple .once<br>
<a href="https://jsfiddle.net/ignoreswing/t4y6nmzq/" rel="nofollow">https://jsfiddle.net/ignoreswing/t4y6nmzq/</a></p>
</li>
</ol>
<h3 dir="auto">What is Expected?</h3>
<ol dir="auto">
<li>btn#1 should fire only one time</li>
<li>If hitting the buttons, fire alert only "once" for all of the three buttons!</li>
</ol>
<h3 dir="auto">What is actually happening?</h3>
<ol dir="auto">
<li>btn#1 fire multiple time</li>
<li>btn#1 and btn#2 fire multiple times.</li>
</ol>
<h3 dir="auto">Vue.js version</h3>
<p dir="auto">2.1.8</p>
<h3 dir="auto">Reproduction Link</h3>
<p dir="auto"><a href="https://jsfiddle.net/bacft9s7/" rel="nofollow">https://jsfiddle.net/bacft9s7/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Clicks on the  element more than once.</p>
<h3 dir="auto">What is Expected?</h3>
<p dir="auto">The event handler should be removed after the first click.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">The event handler except for the last one with .once modifier is not removed.</p>