add-item.vue

<template>
	<div id="add-item">

		<div class="row">
			<div class="col-md-2 mb-2">
				<!--<money v-model="total" v-bind="money" class="form-control" disabled></money>-->
				Total {{ total }}
			</div>
		</div>

		<div class="row" style="margin-top:30px;" v-for="(item, index) in itens">
			<div class="col-md-9 mb-9">
				<input type="text" v-model="item.descricao" placeholder="Descrição do item" class="form-control">
			</div>

			<div class="col-md-2 mb-2">
				<money v-model="item.valor" class="form-control" v-bind="money"></money>
			</div>

			<div class="col-md-1 mb-1">
				<button class="button btn-success" v-if="isLast(index)" @click="add">+</button>
				<button class="button btn-danger" v-if="lastOne(index)" @click="remove(item)">-</button>
			</div>
		</div>

  </div>
</template>

<script>
import { Money } from 'v-money'

export default {

	components: { Money },

	props: ['value', 'total'],

	data () {
		return {
			itens: [],
			money: {},
			showButton: true
		}
	},

	created() {
    this.itens = this.value.filter(_item => true)
  },

  methods: {
    add() {
			const inputDescricao = obj => obj.descricao
			const isNotEmpty = res => res !== ''
			const canAddItem = this.itens.map(inputDescricao).every(isNotEmpty)

			if (canAddItem) this.itens.push({ descricao:'', valor:'' })
			// this.total += this.itens.valor
		},

		remove (item) {
			const delCurrentItem = x => x.descricao !== item.descricao
			
			this.itens = this.itens.filter(delCurrentItem)
		},

		isLast (index) {
			return (index+1 === this.itens.length) ? this.showButton = true : this.showButton = false
		},

		lastOne (index) {
			return (this.itens.length === 1) ? this.showButton = false : this.showButton = true
		}
  },

  watch: {
    itens (itens) {
      this.$emit('input', itens)
    }

		// total (total) {
    //   this.$emit('input', total)
    // }
  }
}
</script>