Fix removing cards

Swing modifies the DOM tree when moving cards. This cause our
`MutationObserver` to receive more events than it should. It will now
ignore any mutations that both add and remove the same node.

VueSwing.vue

@@ -29,20 +29,35 @@ export default {
 
     // Observe changes in DOM
     this.observer = new MutationObserver(mutations => {
+      const addedElements = []
+      const removedElements = []
       mutations.forEach(({ addedNodes, removedNodes }) => {
-        addedNodes.forEach(el => {
-          const card = this.stack.getCard(el)
-          if (card == null) {
-            this.cards.push(this.stack.createCard(el))
-          }
-        })
-        removedNodes.forEach(el => {
-          const card = this.stack.getCard(el)
-          if (card != null) {
-            this.cards.splice(this.cards.indexOf(card), 1)
-            this.stack.destroyCard(card)
-          }
-        })
+        addedElements.push(...addedNodes)
+        removedElements.push(...removedNodes)
+      })
+
+      // Create a new card for each new element
+      addedElements.forEach(el => {
+        // Ignore if the added element is also removed
+        const i = removedElements.indexOf(el)
+        if (i !== -1) {
+          removedElements.splice(i, 1)
+          return
+        }
+
+        const card = this.stack.getCard(el)
+        if (card == null) {
+          this.cards.push(this.stack.createCard(el))
+        }
+      })
+
+      // Remove the card if the element is gone
+      removedElements.forEach(el => {
+        const card = this.stack.getCard(el)
+        if (card != null) {
+          this.cards.splice(this.cards.indexOf(card), 1)
+          this.stack.destroyCard(card)
+        }
       })
     })
     this.observer.observe(this.$el, { childList: true })
@@ -83,3 +98,4 @@ export default {
 <style>
 
 </style>
+

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-swing",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Vue.js wrapper for Swing",
   "main": "VueSwing.vue",
   "repository": {