I'm trying to create a simple marketcap checker for crytpo (like coinmarketcap) using coingecko api.

I can fetch the data and render it, no problem with that. And I fetch the data 2 times per minutes.

But now, I would like to check if the new price is higher or lower than the last price.

I do a v-for loop and I pass some data in my "tokenComponent" for rendering the data like this :

<template>
  <div id="app">
    <div class="container mx-auto">
      <div class="pt-6">
        <h1 class="text-2xl font-bold">Crypto Monkey Cap</h1>
        <div v-for="token in listTokens" :key="token.id">
          <div class="py-6">
            <token-component
              :name="token.name"
              :price="token.current_price"
              :mcap="token.market_cap"
            ></token-component>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TokenComponent from "./components/tokenComponent.vue";

export default {
  name: "App",
  components: {
    TokenComponent,
  },
  data() {
    return {
      listTokens: [],
      lastPrice: 0
    };
  },
  mounted() {
    this.getTokens();

    setInterval(() => {
      this.getTokens()
    }, 30000);
  },
  methods: {
    getTokens() {
    fetch("https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd")
      .then((response) => response.json())
      .then((data) => {
        this.listTokens = data;
      });
    }
  }
};
</script>

and the tokenComponent :

<template>
  <div class="py-4 border-2 rounded-lg">
    <div class="flex justify-around">
      <h2>{{ name }}</h2>
      <h2>{{ price }} $</h2>
      <h2>{{ mcap }} $</h2>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    name: { required: true },
    price: { required: true },
    mcap: { required: true }
  }
};
</script>

I just would like put a conditionnal class in price data if the last price is higher or lower than the new one...

(I'm new in Vuejs... ;) )