exemploState.vue

<template>
  <v-form v-model="valid">
    <v-container>
      <v-layout wrap align-center>
        <v-flex xs12 sm4 d-flex>
          <v-autocomplete
            name="estado"
            v-model="user.estado"
            :items="estados"
            label="Estado"
            item-value="value"
            :rules="[v => !!v || 'Por favor selecione um estado']"
            :search-input.sync="searchEstado"
            item-text="text"
            outline
            required
            :error-messages="errors.estado"
          />
        </v-flex>
        <v-flex xs12 sm8 d-flex>
          <v-autocomplete
            name="cidade"
            v-model="user.cidade"
            :items="cidades"
            label="Cidade"
            :rules="[v => !!v || 'Por favor selecione uma cidade']"
            outline
            :search-input.sync="searchCidade"
            required
          />
        </v-flex>
      </v-layout>
    </v-container>
  </v-form>
</template>

<script>
import brasil from '@/utils/brasil.json';
// importado no componente UserProfile
export default {
  name: 'EstadosCidades',
  props: {
    user: { type: Object }
  },
  data() {
    return {
      valid: true,
      searchEstado: '',
      searchCidade: '',
      estados: [],
      errors: {}
    };
  },
  created() {
    // com metado map gerei o novo array apartir do json brasil alimentando estados
    this.estados = Object.keys(brasil).map(key => ({
      // JS é lindo demais s2
      text: brasil[key].nome,
      value: brasil[key].sigla
    }));
  },
  computed: {
    // Dessa forma consigo utilizar a props "user" para autocompletar as cidades
    cidades() {
      return this.user && this.user.estado
        ? brasil[this.user.estado].cidades
        : [];
    }
  }
};
</script>

StateCities.vue

<template>
    <v-container fluid grid-list-lg ma-0 pa-0>
        <v-layout>
            <v-flex xs12 sm4>
                <v-autocomplete
                    v-model="localState"
                    name="state"
                    :items="states"
                    label="Estado"
                    item-value="id"
                    item-text="code"
                    :rules="[v => !!v || 'Por favor selecione um estado']"
                    required
                    return-object
                    @change="onStateChange"
                />
            </v-flex>

            <v-flex xs12 sm4>
                <v-autocomplete
                    id="cities"
                    v-model="localCity"
                    name="city"
                    :items="cities"
                    label="Cidade"
                    item-value="id"
                    item-text="name"
                    :rules="[v => !!v || 'Por favor selecione uma cidade']"
                    required
                    return-object
                    :error-messages="errors.city"
                    @change="onCityChange"
                />
            </v-flex>
        </v-layout>
    </v-container>
</template>

<script>
    export default {
        name: 'StateCity',

        props: {
            state: {
                type: Object,
                default: () => {
                    return {};
                },
            },

            city: {
                type: Object,
                default: () => {
                    return {};
                },
            },
        },

        data() {
            return {
                valid: true,
                localState: {},
                localCity: {},
                states: [],
                cities: [],
                errors: {},
            };
        },

        created() {
            this.localState = this.state;
            this.localCity = this.city;
            this.fetchStates();

            if (this.localCity.id) {
                this.fetchCities(this.localState.id);
            }
        },

        methods: {
            fetchStates() {
                this.$axios.get('states').then((response) => {
                    this.states = response.data.data;
                }).catch((error) => {
                    this.errors = error.response.data.errors;
                    this.loading = false;
                });
            },

            fetchCities(stateId) {
                if (!stateId) {
                    return false;
                }

                this.cities = [];
                this.$axios.get(`states/${stateId}`).then((response) => {
                    this.cities = response.data.data;
                })
                    .catch((error) => {
                        this.errors = error.response.data.errors;
                        this.loading = false;
                    });
            },

            onStateChange(state) {
                this.onEmit(state, {});
                this.fetchCities(state.id);
            },

            onCityChange(city) {
                this.onEmit(this.localState, city);
            },

            onEmit(state, city) {
                this.$emit('change', { state, city });
            },
        },
    };
</script>