Cannot Retrive Data from API using Composition API of Vue

  import { ref } from "vue";
  import Axios from "axios";

  var ingridient = ref("");
  var allRecipe = [];
  var allData = [];

  async function getRecipes() {
    var allRecipe = [];
    var recipeApi = `https://api.edamam.com/api/recipes/v2?type=public&q=${ingridient.value}&app_id=bbb3e735&app_key=cbaf54fdf80717c6a9ac4a88872cefd7`;
    var recipes = await Axios.get(recipeApi);
    allData = recipes.data.hits;
    allRecipe = allData.map((a) => a.recipe);
    console.log(allRecipe);
    return allRecipe;
  }
</script>

<template>
  <main class="flex flex-col">
    <h1 class="mt-8">Find Your Recipe</h1>
    <form @submit.prevent="getRecipes" class="m-2" action="">
      <input
        class="text-black p-1 m-1"
        type="text"
        placeholder="Enter Ingridient Name"
        v-model="ingridient"
      />
      <button
        type="submit"
        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded"
      >
        Search
      </button>
    </form>
    <li v-for="recipe in allRecipe" :key="recipe.id">{{ recipe.label }};</li>
  </main>
</template>```


this is my code for retriving data from api. i can rtrive data from api that can seen in console log but i cannot show it to frontend.