title: Added component contains old data
body: <p>I don't understand what's happening here. I dynamically am adding a component to a parent template. The thing I don't understand is that for some reason the newly added component carries old data on the first click, and then updates with the latest data on the second click. I am assuming that the new component would also have the new data, but it does not.  <a href="https://zon-ship-trimakas.c9users.io/" rel="nofollow noreferrer">You can see this happening on my site.</a></p>
  
  <p>Just open the console and you can see the count. Click on the red button to add components. Then the first time you click on a new component it reverts back to old data, click again it moves to the latest data.</p>
  
  <p>Here is my code: This gets triggered on <code>click</code> inside my component, with <code>this.counter</code> emitted to my parent template. <code>Counter</code> as a data element is defined on my component.</p>
  
  <pre><code>methods: {
   sendCounter() {
       this.counter++;
       console.log("What's my counter " + this.counter);
       this.$emit('newComponent', this.counter);
   },
  </code></pre>
  
  <p>Then this is the <code>receiver</code> in my parent template:</p>
  
  <pre><code>&lt;marketplace @myError="notice = $event" @newComponent="components = $event++"  v-for="(item, index) in components" :index="index"&gt;&lt;/marketplace&gt;
  </code></pre>
  
  <p>EDIT:
  It seems like the <code>data</code> element is also getting re-created everytime I add an additional component. The weird thing is that it "catches up" the counter to the current count.</p>