potentially fixed ingredient render component

vue3/src/components/display/Instructions.vue

@@ -1,6 +1,6 @@
 <template>
-<!--    <component :is="compiled_instructions" :ingredient_factor="ingredient_factor" :instructions_html="instructions_html"></component>-->
-    <div v-html="instructions_html"></div>
+    <component :is="compiled_instructions" :ingredient_factor="ingredient_factor" :instructions_html="instructions_html"></component>
+<!--    <div v-html="instructions_html"></div>-->
 </template>
 
 <script>

vue3/src/components/display/ScalableNumber.vue

@@ -1,25 +1,27 @@
 <template>
-  <span class="step__scalable-num" :class="[this.factor===1 ? 'step__scalable-num_scaled_false' : (this.factor > 1 ? 'step__scalable-num_scaled_up':'step__scalable-num_scaled_down')]" v-html="calculateAmount(number)"></span>
+    <span class="step__scalable-num"
+          :class="[props.factor===1 ? 'step__scalable-num_scaled_false' : (props.factor > 1 ? 'step__scalable-num_scaled_up':'step__scalable-num_scaled_down')]"
+          v-html="calculateAmount(number)"></span>
 </template>
 
-<script>
+<script lang="ts" setup>
 
+const props = defineProps({
+    number: Number,
+    factor: {
+        type: Number,
+        default: 4
+    },
+})
 
 import {calculateFoodAmount} from "@/utils/number_utils.ts";
 
-export default {
-  name: 'ScalableNumber',
-  props: {
-    number: Number,
-    factor: {
-      type: Number,
-      default: 4
-    },
-  },
-  methods: {
-    calculateAmount: function (x) {
-      return calculateFoodAmount(x, this.factor)
-    }
-  }
+/**
+ * call external calculateFoodAmount function
+ * @param x
+ * @return {number | string}
+ */
+function calculateAmount(x) {
+    return calculateFoodAmount(x, props.factor) // TODO reactive bind props
 }
 </script>