Общая сумма всех входных значений

Я хочу суммировать каждую существующую и добавленную стоимость в общую сумму, которую я всегда могу видеть.

Я как бы борюсь с тем, как включить мои существующие значения и те, которые я хочу добавить позже.

В IncomeList у меня есть два входа. Один для incomeReason, а с другим я могу добавить значение (newIncomeValue). Каждый Item в моем List содержит идентификатор. С помощью sumValue я хочу отобразить общую сумму, но не знаю, как это сделать.

Это выглядит так:

IncomeItem.vue

<template>
  <div class = "income-item">
      <div class = "income-item-left">
          <div v-if = "!editing" @dblclick = "editincome" class = "income-item-label"
            :class = "{ completed : completed }">{{ title }}</div>
      </div>
      <div class = "income-item-right"> {{ value }} </div>
      <div class = "remove-item" @click = "removeincome(income.id)">
          &times;
      </div>
  </div>
</template>
<script>
  export default {
      name: 'income-item',
      props: {
          income: {
              type: Object,
              required: true,
          },
          checkAll: {
              type: Boolean,
              required: true,
          }
      },
      data() {
          return {
              'id': this.income.id,
              'title': this.income.title,
              'value': this.income.value,
              'completed': this.income.completed,
              'editing': this.income.editing,
              'beforeEditCache': '',
          }
      },
      watch: {
          checkAll() {
              // if (this.checkAll) {
              //   this.completed = true
              // } else {
              //   this.completed = this.income.completed
              // }
              this.completed = this.checkAll ? true : this.income.completed
          }
      },
      directives: {
          focus: {
              inserted: function (el) {
                  el.focus()
              }
          }
      },
      methods: {
          removeincome(id) {
              this.$emit('removedincome', id)
          },
      }
  }
</script>

IncomeList.vue

<template>
  <div>
      <input type = "text" class = "income-input" placeholder = "What needs to be done" v-model = "newIncome" @keyup.enter = "addincome">
      <input type = "text" class = "value-input" placeholder = "€" v-model = "newIncomeValue" @keyup.enter = "addValue">
      <transition-group name = "fade" enter-active-class = "animated fadeInUp" leave-active-class = "animated fadeOutDown">
        <income-item v-for = "income in incomesFiltered" :key = "income.id" :income = "income" :checkAll = "!anyRemaining"
                    @removedIncome = "removeincome" @finishedEdit = "finishedEdit">
        </income-item>
      </transition-group>

      <div class = "extra-container">
          <div><label><input type = "checkbox" :checked = "!anyRemaining" @change = "checkAllincomes"> Check All</label></div>
          <div>{{ remaining }} items left</div>
      </div>
      <div class = "sum-container">
        <div><label> Einkommen: </label></div>
        <div>{{ sumValue }} €</div>
      </div>
  </div>
</template>

<script>
  import IncomeItem from './IncomeItem'
  export default {
  name: 'income-list',
  components: {
    IncomeItem,
  },
  data () {
    return {
      newIncome: '',
      newIncomeValue: '',
      idForincome: 3,
      incomes: [
        {
          'id': 1,
          'title': 'Finish Vue Screencast',
          'value': 300,
          'completed': false,
          'editing': false,
        },
        {
          'id': 2,
          'title': 'Take over world',
          'value': 315,
          'completed': false,
          'editing': false,
        },
      ]
    }
  },
  computed: {
    remaining() {
      return this.incomes.filter(income => !income.completed).length
    },
    anyRemaining() {
      return this.remaining != 0
    },
    incomesFiltered() {
      return this.incomes
    },
    sumValue() {
      var total = parseInt(document.getElementsByClassName('newIncomeValue').value)
      return total;
    },
  },
  methods: {
    addincome() {
      if (this.newIncome.trim().length == 0) {
        return
      }
      this.incomes.push({
        id: this.idForincome,
        title: this.newIncome,
        value: this.newIncomeValue,
        completed: false,
      })
      this.newIncome = ''
      this.newIncomeValue = ''
      this.this.idForincome++
    },
    removeincome(id) {
      const index = this.incomes.findIndex((item) => item.id == id)
      this.incomes.splice(index, 1)
    },
    checkAllincomes() {
      this.incomes.forEach((income) => income.completed = event.target.checked)
    },
    clearCompleted() {
        this.incomes = this.incomes.filter(income => !income.completed)
    },
    finishedEdit(data) {
      const index = this.incomes.findIndex((item) => item.id == data.id)
      this.incomes.splice(index, 1, data)
    },
    //Same for Value
    addValue() {
      if (this.newIncomeValue.trim().length == 0) {
        return
      }
      this.incomes.push({
        id: this.idForincome,
        title: this.newIncome,
        value: this.newIncomeValue,
        completed: false,
      })
      this.newIncome = ''
      this.newIncomeValue = ''
      this.this.idForincome++
      },
    }
  }
</script>