La razón principal aquí es que está utilizando la clase .quantity para obtener el valor de la input que también se establece en el div principal de la input , por lo que cuando let quantity_str = service.find(".quantity").val() se ejecuta, precisamente el método find que se invoca en service , el div con class .service-option-card que es el padre tanto de div.quantity como de input.quantity , entonces el método find coincidirá con div y la input , por lo tanto, no obtendrá el valor de la input como se esperaba.

Hay muchas correcciones, una solución rápida es prefijar el selector .quanity con input (se convierte en input.quantity ) para apuntar solo a la input y así obtener el resultado esperado.

Aquí hay una demostración con la corrección aplicada:

 // click + button
$(".inc").click(function(){
 service = $(this).closest(".service-option-card");
 let quantity = getCurrentQuantity(service);
 let newQuantity = quantity+1;

 setNewQuantity(newQuantity, service);
 updatePrice(newQuantity, service);
});

// click - button
$(".dec").click(function(){
 service = $(this).closest(".service-option-card");
 let quantity = getCurrentQuantity(service);
 let newQuantity = quantity-1;

 if(newQuantity <= 0) {
 let newQuantity = 0
 setNewQuantity(newQuantity, service);
 } else {
 setNewQuantity(newQuantity, service);
 }

 updatePrice(newQuantity, $(this).closest(".service-option-card"));
});

// Get current number
function getCurrentQuantity(service) {
 let quantity_str = service.find("input.quantity").val();
 quantity_num = Number(quantity_str);
 return quantity_num;
}

// Set new Number
function setNewQuantity(quantity, service) {
 service.find("input.quantity").val(quantity);
}

// Update Price
function updatePrice(quantity, service) {
 var price = parseInt(service.find(".price").val().replace(/,/g, ""));
 var total = quantity * price;

 if(total < 0) {
 total = 0;
 }
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="service-option-card" data-monthly="10"> 
 <div class="quantity">
 <button class="btn btn-quantity dec">-</button>
 <input class="quantity-input quantity" value="1">
 <button class="btn btn-quantity inc">+</button>
 </div>
</div>

La línea var price = parseInt(service.find(".price").val().replace(/,/g, "")) arroja un error porque su HTML no tiene un elemento que tenga la clase de price que lleva para intentar ejecutar el método de replace en undefined .

De todos modos, solo quería advertirle sobre eso, la solución está fuera del alcance de mi respuesta (aunque con gusto le proporcionaré más ayuda si es necesario).

Se está rompiendo porque su elemento de entrada tiene una clase .quantity que también es una clase en un elemento div. El método de búsqueda en las funciones setNewQuantity() y getCurrentQuantity() seleccionan el div que evalúa su valor en 0 porque el valor no existe para la etiqueta div. En el primer clic, el cero se evalúa en 1, lo que también es el valor en su etiqueta de entrada, por lo tanto, no parece tener un efecto visual. cambie sus funciones a

 // Get current number
function getCurrentQuantity(service) {
 console.log({service})
 let quantity_str = service.find("input.quantity").val();
 console.log({quantity_str})
 quantity_num = Number(quantity_str);
 return quantity_num;
}

// Set new Number
function setNewQuantity(quantity, service) {
 service.find("input.quantity").val(quantity);
}

Creo que es porque estás usando Number() en tu función getCurrentQuantity() .