i'm trying to do a price table where the price show depending on the hours selected, right know my code shows all the information i want but i can't hide the info that is show by default

I tried with a v-if but shows me both prices and not the hourly price

This is how i send the data and the model is by default empty

prices: [
        {
          "id": 1,
          "name_package": "10 Hours",
          "price_package": "$2500",
          "link": "https://subscriptions.zoho.com/subscribe/f51eeedc48b6c02c3be2cd3ea85e1d052d1433f07e0c1f74ad482bf477cf719e/250TUTOR10"
        },
        {
          "id": 2,
          "name_package": "20 Hours",
          "price_package": "$5500",
          "link": "https://subscriptions.zoho.com/subscribe/f51eeedc48b6c02c3be2cd3ea85e1d052d1433f07e0c1f74ad482bf477cf719e/250TUTOR10"
        }
      ],
      priceSelected: {} 

This is the code i use to show the information

<h5>Tutoring</h5>
<small>Starting at</small>

<h2 v-if="priceSelected !== null">{{priceSelected.price_package}}</h2>
<h2 v-else>$225<small>/HOURLY</small></h2>

<button class="btn btn-sm btn-primary" >
    Start Today
</button>

<select v-model="priceSelected" class="form-control" id="price">
    <option value="null" disabled>Select Package</option>
    <option v-for="price in prices" :key="price.id" :value="price">{{price.name_package}}</option>
</select>