Vue 3 - nitro button

Question

I've been trying to populate the textarea with a numeric value when clicking the button, but it doesn't work. I've tried modifying the inputs and returning different values, but nothing seems to be working. Any suggestions would be appreciated. Thanks for your help!

this is the script with function and some api call

<script>
import { ref, onMounted, onUnmounted } from 'vue';
import { useAppStore } from '~/stores/app.store';
import { clearIntervalAsync, setIntervalAsync } from 'set-interval-async';

export default {
  setup() {
    const app = useAppStore();
    let userID = useCookie('userID');

    const currentExchange = ref(app.getUserSelectedExchange);
    const currentSymbol = ref(app.getUserSelectedMarket);

    const bestBid = ref(null);
    const bestAsk = ref(null);
    const lowerPrice = ref(null);
    const upperPrice = ref(null);

    let orderBookInterval = null;

    onMounted(() => {
      orderBookInterval = setIntervalAsync(fetchOrderBookPooling, 500);
    });

    onUnmounted(() => {
      clearIntervalAsync(orderBookInterval);
    });

    async function fetchOrderBookPooling() {
      try {
        const orderBook = await $fetch('/api/v1/fetchOrderBook', {
          query: {
            userID: userID.value,
            exchange: currentExchange.value,
            symbol: currentSymbol.value
          }
        });
        if (orderBook.data) {
          bestBid.value =
            orderBook.data.bids.length > 0 ? orderBook.data.bids[0][0] : null;
          bestAsk.value =
            orderBook.data.asks.length > 0 ? orderBook.data.asks[0][0] : null;

          // Actualizați direct valorile aici
          lowerPrice.value = bestBid.value ? bestBid.value * 0.95 : null;
          upperPrice.value = bestAsk.value ? bestAsk.value * 1.05 : null;
        }
      } catch (error) {
        console.error('Error fetching order book:', error);
      }
    }
    function setLowerPrice() {
      if (bestBid.value) {
        lowerPrice.value = bestBid.value * 0.95;
      }
    }

    function setUpperPrice() {
      if (bestAsk.value) {
        upperPrice.value = bestAsk.value * 1.05;
      }
    }

    return {
      bestBid,
      bestAsk,
      lowerPrice,
      upperPrice,
      setLowerPrice,
      setUpperPrice
    };
  }
};
</script>

I have here new code, this one is whos the value but doesn't work to populate the textarea

<template>
  <n-card>
    <n-space vertical :size="12">
      <div class="asks box">
        <div class="row">
          <div class="col">Best Ask: {{ bestAsk }}</div>
        </div>
      </div>

      <div class="bids box">
        <div class="row">
          <div class="col">Best Bid: {{ bestBid }}</div>
        </div>
      </div>

      <div>
        <n-button @click="lowerPrice">Setează 5% Bid</n-button>
        <n-button @click="upperPrice">Setează 5% Ask</n-button>
      </div>

      <div>
        <n-input
          id="lowerPriceInput"
          v-model="lowerPrice"
          name="lowerPrice"
          placeholder="Lower Price"
        >
        </n-input>
        <n-input
          id="upperPriceInput"
          v-model="upperPrice"
          name="upperPrice"
          placeholder="Upper Price"
        >
        </n-input>
      </div>
    </n-space>
  </n-card>
</template>