diff --git a/frontend/src/components/Recipe/RecipeViewer/Ingredients.vue b/frontend/src/components/Recipe/RecipeViewer/Ingredients.vue
index 1a29c14f5888..0014966dbf14 100644
--- a/frontend/src/components/Recipe/RecipeViewer/Ingredients.vue
+++ b/frontend/src/components/Recipe/RecipeViewer/Ingredients.vue
@@ -37,16 +37,13 @@ export default {
   props: {
     ingredients: Array,
   },
-  data() {
-    return {
-      displayIngredients: [],
-    };
-  },
-  mounted() {
-    this.displayIngredients = this.ingredients.map(x => ({
-      text: x,
-      checked: false,
-    }));
+  computed: {
+    displayIngredients() {
+      return this.ingredients.map(x => ({
+        text: x,
+        checked: false,
+      }));
+    },
   },
   methods: {
     generateKey(item, index) {