изменение прозрачности текста при нажатии на кнопку

Подскажите, пожалуйста, можно ли прозрачность так в функции прописывать?

<li class="cart_product" v-for="product in cartProducts" :key="product.id" :style="{ opacity: product.opacity }">
      <input type="checkbox" v-model="cartProduct.selected" @change="cartStore.updateProduct(cartProduct)">
                {{ product.img }}  {{ product.name }} - {{ product.price }}
                <button @click="cartStore.deleteProduct(cartProduct)">Удалить товар</button>
            </li> 


function deleteProduct(product: CartProduct | Product) {
      product.opacity = 1;
      const index = cartProducts.value.findIndex((item) => {
        return product.id == item.id;
      });
      if (index != -1) {
        cartProducts.value[index].deleted = true;
         return true; 
      }
    }