<template>
  <div>
    <Rotulo nome="Nome">
      <input @input="alterarNome" type="text" />
    </Rotulo>
    <Rotulo nome="Sobrenome">
      <input @input="alterarSobreNome" type="text" />
    </Rotulo>
  </div>
</template>
<script>
import Rotulo from './Rotulo.vue'
export default {
  components: { Rotulo },
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  methods: {
    alterarNome(event) {
      this.$emit('input', { nome: event.target.value, sobrenome: this.value.sobrenome, email: this.value.email, senha: this.value.senha })
    },
    alterarSobreNome(event) {
      this.$emit('input', { nome: this.value.nome, sobrenome: event.target.value, email: this.value.email, senha: this.value.senha })
    }
  },
}
</script>