diff --git a/vue/src/components/CompileComponent.vue b/vue/src/components/CompileComponent.vue
index 7a14335b8..bc0ab3c45 100644
--- a/vue/src/components/CompileComponent.vue
+++ b/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)
 
diff --git a/vue/src/components/ScalableNumber.vue b/vue/src/components/ScalableNumber.vue
index 8761b9d7c..ee6438931 100644
--- a/vue/src/components/ScalableNumber.vue
+++ b/vue/src/components/ScalableNumber.vue
@@ -1,5 +1,6 @@
 <template>
-  <p>{{ calculateAmount(number) }}</p>
+  <span>{{ calculateAmount(number) }}</span>
+
 </template>
 
 <script>
diff --git a/vue/webpack-stats.json b/vue/webpack-stats.json
index 8abe5ca49..77d151ed3 100644
--- a/vue/webpack-stats.json
+++ b/vue/webpack-stats.json
@@ -1 +1 @@
-{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.6895bd28654af90f46e1.hot-update.js","publicPath":"http://localhost:8080/recipe_view.6895bd28654af90f46e1.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.6895bd28654af90f46e1.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\components\\CompileComponent.vue\n  1:1  error  The template requires child element  vue/valid-template-root\n\n✖ 1 problem (1 error, 0 warnings)\n"}
\ No newline at end of file
+{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.5efb457965b10ba4c4a1.hot-update.js","publicPath":"http://localhost:8080/recipe_view.5efb457965b10ba4c4a1.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.5efb457965b10ba4c4a1.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):\n(Emitted value instead of an instance of Error) \n\n  Errors compiling template:\n\n  Component template requires a root element, rather than just text.\n\n  1  |  \n     |   \n  2  |  {{ calculateAmount(number) }}\n     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n  3  |  \n"}
\ No newline at end of file