title: Vue.js – how to clone element with events?
body: <p>I have a Vue.js plugin where user can transmit they elements as slot. I have to clone some of them (in specific situations). Of course, users can add events to these elements. For example:</p>
  
  <pre><code>&lt;component&gt;
      &lt;div class="slot-item" @click="myMethod(1)"&gt;&lt;/div&gt;
      &lt;div class="slot-item" @click="myMethod(2)"&gt;&lt;/div&gt;
      &lt;div class="slot-item" @click="myMethod(3)"&gt;&lt;/div&gt;
  &lt;/component&gt;
  </code></pre>
  
  <p>How to clone this slot elements with all Vue/JS events? And finally have rendered HTML, for example:</p>
  
  <pre><code>&lt;div class="my-component"&gt;
      &lt;!-- It's the last item cloned --&gt;
      &lt;div class="slot-item cloned-slot-item" @click="myMethod(3)"&gt;&lt;/div&gt;
  
      &lt;!-- These are the original user elements --&gt;
      &lt;div class="slot-item" @click="myMethod(1)"&gt;&lt;/div&gt;
      &lt;div class="slot-item" @click="myMethod(2)"&gt;&lt;/div&gt;
      &lt;div class="slot-item" @click="myMethod(3)"&gt;&lt;/div&gt;
  
      &lt;!-- It's the first item cloned --&gt; 
      &lt;div class="slot-item cloned-slot-item" @click="myMethod(1)"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>