How to count the data in checkboxes when checking and unchecking a checkbox?

Question

Vue.js

Hello everyone, tell a beginner how to properly work with v-checkbox in vuetify.
Task:
List of services, the array contains the name of the service, description and cost of the work.

services: [
        {
          title: "Освобождение рабочей области жёсткого диска",
          description: "Подробное описание услуги 1",
          cost: 790,
          checked: false
        },
        {
          . . .
        },

It is necessary to calculate and display the amount according to the set checkbox, the amount should also change when the checkbox is unchecked. I understand how to add, but how to take away?
Here is the component page code:

spoiler

<template>
  <div class="pchelp">
    <v-container fluid class="my-5">
      <v-card class="pa-3">
        <v-card flat>
          <v-toolbar class="pt-2" color="primary" dark extended flat>
            <h1>
              Компьютерная
              <br>помощь
            </h1>
          </v-toolbar>

          <v-layout row pb-2>
            <v-flex xs8 offset-xs2>
              <v-card class="card--flex-toolbar">
                <v-toolbar card prominent>
                  <v-toolbar-title class="body-2 grey--text">Выберите раздел</v-toolbar-title>

                  <v-btn outline color="indigo">Общая помощь</v-btn>
                  <v-btn outline color="indigo">Оборудование</v-btn>
                  <v-btn outline color="indigo">Система</v-btn>
                </v-toolbar>

                <v-divider></v-divider>

                <v-card-text style="height: 1000px;">
                  <v-container>
                    <v-layout row wrap v-for="service in services" :key="service.title">
                      <v-card class="ma-1" style="min-width: 70%; margin: auto;">
                        <v-layout row wrap>
                          Сумма: {{ selectedSum }}
                          <v-flex md12>
                            <v-card-title class="primary white--text">
                              {{ service.title }}
                              <v-spacer></v-spacer>
                              <h2 class="white--text">
                                <v-checkbox
                                  @click="`{{ selectedSum += service.cost }}`"
                                  class="light--text"
                                  v-model="selected"
                                  :value="`${service.cost}`"
                                  :label="`${service.cost} руб.`"
                                ></v-checkbox>
                              </h2>
                            </v-card-title>
                            <v-expansion-panel>
                              <v-expansion-panel-content expand-icon="mdi-menu-down">
                                <template v-slot:header>
                                  <div>Подробнее</div>
                                </template>
                                <v-card>
                                  <v-card-text class="grey lighten-3">{{ service.description }}</v-card-text>
                                </v-card>
                              </v-expansion-panel-content>
                            </v-expansion-panel>
                          </v-flex>
                        </v-layout>
                      </v-card>
                    </v-layout>
                  </v-container>
                </v-card-text>
              </v-card>
            </v-flex>
          </v-layout>
        </v-card>
      </v-card>
    </v-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedSum: 0,
      services: [
        {
          title: "Освобождение рабочей области жёсткого диска",
          description: "Подробное описание услуги 1",
          cost: 790,
          checked: false
        },
        {
          title: "Сохранение, перенос информации (за 1 Гб включительно)",
          description: "Подробное описание услуги 2",
          cost: 340,
          checked: false
        },
        {
          title: "Деление жесткого диска на разделы (за 1 раздел)",
          description: "Подробное описание услуги 3",
          cost: 550,
          checked: true
        },
        {
          title: "Форматирование жесткого диска (за 1 раздел)",
          description: "Подробное описание услуги",
          cost: 240,
          checked: false
        },
        {
          title: "Восстановление данных (случайно удаленные файлы и др.)",
          description: "Подробное описание услуги",
          cost: 750,
          checked: false
        },
        {
          title: "Дефрагментация жесткого диска",
          description: "Подробное описание услуги",
          cost: 50,
          checked: false
        }
      ],
      selected: [],
      methods: {
        selectedSummary: function() {
          return (this.selectedSum = this.selectedSum.reduce(
            (acc, item) => acc + item.value,
            0
          ));
        }
      }
    };
  }
};
</script>

<style lang="sass" scoped>

.card--flex-toolbar
  margin-top: -64px

.centered
  text-align: center
  margin: 0 auto
</style>

Answer 1

Remove the click handler from the checkboxes and make a calculated property:

computed: {
  sum() {
    return this.selected.reduce((acc, n) => acc + +n, 0);
  },
},

Or, without the additional selected array:

<v-checkbox
  class="light--text"
  v-model="service.checked"
  :label="`${service.cost} руб.`"
></v-checkbox>

computed: {
  sum() {
    return this.services.reduce((acc, n) => acc + n.cost * n.checked, 0);
  },
},

UPD. https://jsfiddle.net/w0vrxcyg/