ClearBowl/front/pages/recipes/index.vue

<template>
    <div style="width: 100%">
        <Row type="flex" justify="center">
            <AddRecipeModal style="margin-bottom: 20px" @recipe-added="refreshRecipeTable"/>
        </Row>
        <Row type="flex" justify="center">
            <SearchRecipe ref="recipes" style="width: 80%"/>
        </Row>
    </div>
</template>

<script>
    import AddRecipeModal from "../../components/Recipes/AddRecipeModal";
    import SearchRecipe from "../../components/Recipes/SearchRecipe";

    export default {
        name: 'recipes',
        auth: false,
        components: {
            AddRecipeModal,
            SearchRecipe
        },
        methods: {
            refreshRecipeTable(){
                this.$refs.recipes.getRecipes();
            }
        }
    };
</script>

<style scoped>

</style>