diff --git a/frontend/components/global/RecipeJsonEditor.vue b/frontend/components/global/RecipeJsonEditor.vue
index b73eaba52..a90e1e8be 100644
--- a/frontend/components/global/RecipeJsonEditor.vue
+++ b/frontend/components/global/RecipeJsonEditor.vue
@@ -1,6 +1,6 @@
 <template>
   <JsonEditorVue
-    :modelValue="modelValue"
+    :model-value="modelValue"
     v-bind="$attrs"
     :style="{ height }"
     :stringified="false"
@@ -8,44 +8,50 @@
   />
 </template>
 
-<script setup lang="ts">
-import { defineProps, defineEmits } from 'vue'
-import JsonEditorVue from 'json-editor-vue'
+<script lang="ts">
+import { defineComponent } from "vue";
+import JsonEditorVue from "json-editor-vue";
 
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    default: () => ({}),
+export default defineComponent({
+  name: "RecipeJsonEditor",
+  components: { JsonEditorVue },
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => ({}),
+    },
+    height: {
+      type: String,
+      default: "1500px",
+    },
   },
-  height: {
-    type: String,
-    default: '1500px',
+  emits: ["update:modelValue"],
+  setup(_, { emit }) {
+    function parseEvent(event: any): object {
+      if (!event) {
+        return {};
+      }
+      try {
+        if (event.json) {
+          return event.json;
+        }
+        else if (event.text) {
+          return JSON.parse(event.text);
+        }
+        else {
+          return event;
+        }
+      }
+      catch {
+        return {};
+      }
+    }
+    function onChange(event: any) {
+      emit("update:modelValue", parseEvent(event));
+    }
+    return {
+      onChange,
+    };
   },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-function parseEvent(event: any): object {
-  if (!event) {
-    return {};
-  }
-
-  try {
-    if (event.json) {
-      return event.json;
-    }
-    else if (event.text) {
-      return JSON.parse(event.text);
-    }
-    else {
-      return event;
-    }
-  } catch {
-    return {};
-  }
-}
-
-function onChange(event: any) {
-  emit('update:modelValue', parseEvent(event));
-}
+});
 </script>