Endereco.vue

<template>
  <v-card>
    <v-card-title v-if="titulo">
      {{titulo}}
    </v-card-title>
    <v-container fluid grid-list-md>
      <v-layout row wrap>
        <v-flex xs2 md2>
          <v-text-field
            label="Cep"
            ref="cep"
            :value="cep"
            name="cep"
            @blur="buscarCep($event)"
            return-masked-value
            @change="$emit('update:cep', $event)"
            required
            mask="#####-###"
            hide-details
          ></v-text-field>
        </v-flex>
        <v-flex xs2 md2>
          <v-text-field
            label="Estado"
            ref="estado"
            :disabled="disableEstado"
            :value="estado"
            name="estado"
            @change="$emit('update:estado', $event)"
            required
            hide-details
          ></v-text-field>
        </v-flex>
        <v-flex xs8 md8>
          <v-text-field
            :value="cidade"
            :disabled="disableCidade"
            name="cidade"
            ref="cidade"
            @change="$emit('update:cidade', $event)"
            label="Cidade"
            required
            hide-details
          ></v-text-field>
        </v-flex>
        <v-flex xs2 md2>
          <v-text-field
            :value="tipoLogradouro"
            :disabled="disableTipoLogradouro"
            name="tipoLogradouro"
            ref="tipoLogradouro"
            @change="$emit('update:tipoLogradouro', $event)"
            label="Tipo Logradouro"
            required
            hide-details
          ></v-text-field>
        </v-flex>
        <v-flex xs6 md6>
          <v-text-field
            :value="logradouro"
            name="logradouro"
            label="Logradouro"
            :disabled="disableLogradouro"
            ref="logradouro"
            @change="$emit('update:logradouro', $event)"
            required
            hide-details
          ></v-text-field>
        </v-flex>
        <v-flex xs2 md2>
          <v-text-field
            :value="numero"
            name="numero"
            ref="numero"
            @change="$emit('update:numero', $event)"
            label="Número"
            required
            hide-details
          ></v-text-field>
        </v-flex>
        <v-flex xs2 md2>
          <v-text-field
            :value="complemento"
            ref="complemento"
            name="complemento"
            @change="$emit('update:complemento', $event)"
            label="Complemento"
            required
            hide-details
          ></v-text-field>
        </v-flex>
      </v-layout>
    </v-container>
    <v-alert :value="erro" type="error">
      {{mensagemErro}}
    </v-alert>
  </v-card>
</template>
<script>
import Vue from 'vue';

export default {
  name: 'Endereco',
  mounted() {
    this.$refs.cep.focus();
  },
  props: {
    titulo: String,
    tipo: String,
    cep: String,
    estado: String,
    cidade: String,
    tipoLogradouro: String,
    logradouro: String,
    numero: String,
    complemento: String,
  },
  data() {
    return {
      form: {
        tipo: '',
        cep: '',
        estado: '',
        cidade: '',
        tipoLogradouro: '',
        logradouro: '',
        numero: '',
        complemento: '',
      },
      disableEstado: false,
      disableCidade: false,
      disableTipoLogradouro: false,
      disableLogradouro: false,
      mensagemErro: '',
      erro: false,
    };
  },
  methods: {
    isValid() {
      return this.$refs.form.validate();
    },
    buscarCep(event) {
      const re = new RegExp(/^[0-9]{5}-[0-9]{3}$/);
      this.disableEstado = false;
      this.erro = false;
      this.disableCidade = false;
      this.disableTipoLogradouro = false;
      this.disableLogradouro = false;
      if (re.test(event.target.value)) {
        this.axios.get(`/logradouro/cep/${event.target.value}/`).then((response) => {
          this.form.estado = response.data.uf;
          this.form.cidade = response.data.localidade;
          this.form.tipoLogradouro = response.data.tipo;
          this.form.logradouro = response.data.logradouro;
          this.disableEstado = true;
          this.disableCidade = true;
          this.disableTipoLogradouro = true;
          this.disableLogradouro = true;
          this.$refs.numero.focus();
        }).catch((error) => {
          this.mensagemErro = error.response.data.message;
          this.erro = true;
          Vue.nextTick(() => {
            this.$refs.estado.focus();
          });
        });
      }
    },
  },
};
</script>



<!-- ASSIM EU ESTOU CHAMANDO NA MINHA CLASSE PRINCIPAL -->

<Endereco ref="credorEndereco"
  :cep="credor.cep" :estado="credor.estado" :cidade="credor.cidade"
  :tipo="credor.tipoLogradouro" :logradouro="credor.logradouro"
  :numero="credor.nrLogradouro" :complemento="credor.complementoLogradouro">
</Endereco>