Estoy tratando de hacer una tabla de precios donde el precio se muestre según las horas seleccionadas, sé que mi código muestra toda la información que quiero, pero no puedo ocultar la información que se muestra de forma predeterminada.

Probé con un v-if pero me muestra ambos precios y no el precio por hora

Así es como envío los datos y el modelo está vacío por defecto

 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: {}

Este es el código que uso para mostrar la información.

 <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>