diff --git a/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue b/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
index ff6c75cd3d30..d9c4a10a37a6 100644
--- a/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
+++ b/frontend/components/Domain/Recipe/RecipeIngredientListItem.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="ma-0 pa-0 text-subtitle-1 dense-markdown ingredient-item">
-    <SafeMarkdown v-if="quantity" class="d-inline" :source="quantity" />
-    <template v-if="unit">{{ unit }} </template>
-    <SafeMarkdown v-if="note && !name" class="text-bold d-inline" :source="note" />
+    <SafeMarkdown v-if="parsedIng.quantity" class="d-inline" :source="parsedIng.quantity" />
+    <template v-if="parsedIng.unit">{{ parsedIng.unit }} </template>
+    <SafeMarkdown v-if="parsedIng.note && !parsedIng.name" class="text-bold d-inline" :source="parsedIng.note" />
     <template v-else>
-      <SafeMarkdown v-if="name" class="text-bold d-inline" :source="name" />
-      <SafeMarkdown v-if="note" class="note" :source="note" />
+      <SafeMarkdown v-if="parsedIng.name" class="text-bold d-inline" :source="parsedIng.name" />
+      <SafeMarkdown v-if="parsedIng.note" class="note" :source="parsedIng.note" />
     </template>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
+import { computed, defineComponent, toRefs } from "@nuxtjs/composition-api";
 import { RecipeIngredient } from "~/lib/api/types/group";
 import { useParsedIngredientText } from "~/composables/recipes";
 
@@ -30,9 +30,12 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const parsed = useParsedIngredientText(props.ingredient, props.disableAmount, props.scale);
+    const parsedIng = computed(() => {
+      return useParsedIngredientText(props.ingredient, props.disableAmount, props.scale);
+    });
+
     return {
-      ...parsed,
+      parsedIng,
     };
   },
 });