preparing listingComponent to receive empty data and updated this data according to vue lifecycle hook

src/components/ListingComponent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import blockchain from "@/utils/blockchain";
-import { ref } from "vue";
+import { ref, onUpdated } from "vue";
 
 // props
 const props = defineProps<{
@@ -38,13 +38,27 @@ const loadMore = () => {
   else itemsToShow.value = props.walletTransactions;
 };
 
+// lifecycle methods
+
+onUpdated(() => {
+  if (itemsToShow.value.length == 0) {
+    itemsToShow.value =
+      props.walletTransactions?.length > 3
+        ? props.walletTransactions.slice(0, 3)
+        : props.walletTransactions;
+  }
+});
+
 //emits
 const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
 </script>
 
 <template>
   <div class="blur-container">
-    <div class="grid grid-cols-4 grid-flow-row w-full px-6">
+    <div
+      class="grid grid-cols-4 grid-flow-row w-full px-6"
+      v-if="props.walletTransactions?.length != 0"
+    >
       <span class="text-xs text-gray-50 font-medium justify-self-center"
         >Valor</span
       >
@@ -102,14 +116,20 @@ const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
         <img alt="Redirect image" src="@/assets/redirect.svg" />
       </div>
     </div>
-    <div class="flex justify-center w-full mt-2">
+    <div
+      class="flex justify-center w-full mt-2"
+      v-if="props.walletTransactions?.length != 0"
+    >
       <button type="button" class="text-white" @click="loadMore()">
         Carregar mais
       </button>
     </div>
-    <p class="font-bold" v-if="props.walletTransactions?.length == 0">
+    <span
+      class="font-bold text-gray-900"
+      v-if="props.walletTransactions?.length == 0"
+    >
       Não há nenhuma transação anterior
-    </p>
+    </span>
   </div>
 </template>
 

src/views/ManageBidsView.vue

@@ -9,12 +9,9 @@ const { depositsAddedList } = storeToRefs(etherStore);
 
 <template>
   <div class="page">
-    <div class="header">
-      Gerenciar ofertas
-    </div>
+    <div class="header">Gerenciar ofertas</div>
     <ListingComponent
-      v-if="depositsAddedList?.length != 0"
-      :wallet-transactions="depositsAddedList!"
+      :wallet-transactions="depositsAddedList"
       :is-manage-mode="true"
     ></ListingComponent>
   </div>
@@ -25,7 +22,7 @@ const { depositsAddedList } = storeToRefs(etherStore);
   @apply flex flex-col gap-10 mt-20 w-full;
 }
 
-.header{
-  @apply text-3xl text-gray-900 leading-9 font-bold justify-center flex
+.header {
+  @apply text-3xl text-gray-900 leading-9 font-bold justify-center flex;
 }
 </style>