its working

vue/src/components/CompileComponent.vue

@@ -1,7 +1,7 @@
 <template>
 
   <div>
-    <component :is="compiled" :servings="servings"></component>
+    <component :is="compiled" :servings="servings" :code="code"></component>
   </div>
 </template>
 
@@ -18,7 +18,7 @@ export default {
   data() {
     return {
       compiled: null,
-      test: '<div><span>{{servings}}  Test <scalable-number v-bind:number="2" :factor="servings"></scalable-number></span></div>'
+      test: '<div><p>Alle Zutaten vermischen und an einen <strong>warmen Ort</strong> stelllen <scalable-number v-bind:number="10.0000000000000000" v-bind:factor="servings"></scalable-number> g Anstellgut</p></div>'
     }
   },
   components: {
@@ -27,13 +27,16 @@ export default {
   mounted() {
     setTimeout(() => {
       this.compiled = Vue.component('button-counter', {
-        props: ['servings'],
+        props: ['servings', 'code'],
+        components: {
+          ScalableNumber, // eslint-disable-line
+        },
         data: function () {
           return {
             count: 0
           }
         },
-        template: '<button v-on:click="count++">You clicked me {{ servings }} times.</button>'
+        template: `<div>${this.code}</div>`
       })
     }, 500)
 

vue/src/components/ScalableNumber.vue

@@ -1,5 +1,6 @@
 <template>
-  <p>{{ calculateAmount(number) }}</p>
+  <span>{{ calculateAmount(number) }}</span>
+
 </template>
 
 <script>