fix: prevent style tags from piling up (#71)

Author: Justineo

package-lock.json

@@ -22,7 +22,7 @@
     "hash-sum": "^2.0.0",
     "prismjs": "^1.21.0",
     "recast": "^0.19.1",
-    "vue-inbrowser-compiler": "^4.33.4",
+    "vue-inbrowser-compiler": "^4.42.0",
     "vue-prism-editor": "^1.2.2",
     "vue-template-compiler": "^2.6.12"
   },

package.json

@@ -86,6 +86,9 @@ export default {
   created() {
     this.renderComponent(this.code.trim());
   },
+  destroyed() {
+    this.removeScopedStyle();
+  },
   watch: {
     code(value) {
       this.renderComponent(value.trim());
@@ -118,6 +121,11 @@ export default {
       this.$emit("error", e);
       this.error = e.message;
     },
+    removeStyle() {
+      if (this.removeScopedStyle) {
+        this.removeScopedStyle();
+      }
+    },
     renderComponent(code) {
       let options = {};
       let style;
@@ -182,11 +190,14 @@ export default {
           options.components = { ...options.components, ...this.components };
         }
       }
+
+      this.removeStyle();
+
       if (style) {
         // To add the scope id attribute to each item in the html
         // this way when we add the scoped style sheet it will be aplied
         options._scopeId = `data-${this.scope}`;
-        addScopedStyle(style, this.scope);
+        this.removeScopedStyle = addScopedStyle(style, this.scope);
       }
 
       if (options.template || options.render) {