VUE JS: Criando componente lista de telefones

Neste post gostaria de mostrar um forma de criar um componente para listar telefones com VUE. Este exemplo pode ser utilizado dentro de um formulário para agrupar diversos telefones de um cliente ou pessoa por exemplo:

	<div id="vue-lista-telefone">
	<button class="btn btn-primary col-md-12" @click="adicionar">
	Adicionar Telefone
	</button>
	<div v-for="telefone in telefones" :key="telefone.id" class="form-inline">
	<input type="hidden" v-model="telefone.id" />
	<div class="form-group col-xs-3">
	<input class="form-control mb-2 mr-sm-2 mb-sm-0" type="tel" placeholder="DDD" data-tel="" v-model="telefone.ddd" name="Telefone[Ddd]" value="" required="" maxlength="2">
	</div>
	<div class="form-group col-xs-3">
	<input class="form-control mb-2 mr-sm-2 mb-sm-0" type="tel" data-tel="" v-model="telefone.numero" name="Telefone[Numero]" value="" placeholder="Telefone" required="" maxlength="9">
	</div>
	<div class="form-group col-xs-3">
	<select class="custom-select mr-sm-2" v-model="telefone.tipo">
	<option selected>Escolha tipo...</option>
	<option value="0">Principal</option>
	<option value="1">Celular</option>
	<option value="2">Residêncial</option>
	<option value="3">Trabalho</option>
	<option value="4">Comercial</option>
	<option value="5">Outros</option>
	</select>
	</div>
	<div class="form-group col-xs-3">
	<select class="custom-select mr-sm-2" v-model="telefone.situacao">
	<option selected>Escolha situação...</option>
	<option value="0">Ativo</option>
	<option value="1">Inativo</option>
	</select>
	</div>
	<button class="btn btn-danger col-xs-3" @click="remover(telefone)">Remover</button>
	</div>
	</div>

view raw vue-lista-telefone.html hosted with ❤ by GitHub

	new Vue({
	el:'#vue-lista-telefone',
	data:{
	telefones:[]
	},
	methods:{
	adicionar:function(){
	var id = this.telefones.length+1;
	this.telefones.push({
	id: id,
	ddd:'',
	numero:'',
	tipo:0,
	situacao:0
	});
	},
	remover:function(telefone){
	console.log(telefone);
	this.telefones.splice(this.telefones.indexOf(telefone),1);
	}
	}
	});

view raw vue-lista-telefone.js hosted with ❤ by GitHub

O  resultado deste componente é um array de telefones que pode ser enviado ao seu back-end e relacionado a algum registro de pessoa, empresa ou algo da sua necessidade. Em caso de edição para exibição dos registros já salvos pode ser utilizado a função mounted e carregar todos os telefones para dentro do componente.

O resultado do código acima com Bootstrap é algo como a imagem abaixo:

Um exemplo do componente funcionando podeser visto em:
https://jsfiddle.net/backos/kwcrr9bq/