recipes/vue3/src/pages/RecipeViewPage.vue

<template>
    <RecipeView :recipe="recipe"></RecipeView>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
import {ApiApi, Recipe} from "@/openapi";
import RecipeView from "@/components/display/RecipeView.vue";

export default defineComponent({
    name: "RecipeSearchPage",
    components: {RecipeView},
    watch: {
        id: function (newValue) {
            this.refreshData(newValue)
        },
    },
    props: {
        id: {type: String, required: true}
    },
    data() {
        return {
            recipe: {} as Recipe
        }
    },
    mounted() {
        this.refreshData(this.id)
    },
    methods: {
        refreshData(recipeId: string) {
            const api = new ApiApi()
            api.apiRecipeRetrieve({id: Number(recipeId)}).then(r => {
                this.recipe = r
            })
        }
    }
})
</script>

<style scoped>

</style>