Example.vue

<template>
    <div>
        <b-form @submit.prevent="onSubmit" class="m50">
            <b-row>                   
                <b-col md="4">
                    <b-form-group>
                        <b-form-select @input="getCities(form.state.id)" id="states" required v-model="form.state" :options="states">
                            <template slot="first">
                                <option :value="null" disabled>UF *</option>
                            </template>
                        </b-form-select>
                    </b-form-group>
                </b-col>
                <b-col md="8">
                    <b-form-group>
                        <b-form-select id="cities" :disabled="form.state == null" required v-model="form.city" :options="cities">
                            <template slot="first">
                                <option :value="null" disabled>Cidade *</option>
                            </template>
                        </b-form-select>
                    </b-form-group>
                </b-col>
            </b-row>
            <b-form-group>
                <b-form-textarea id="message" required v-model="form.message" placeholder="Mensagem *" :rows="5" :max-rows="6"></b-form-textarea>                            
            </b-form-group>
            <b-row>
                <b-col md="12">
                    <b-button class="float-right mt-5" type="submit" variant="primary">Enviar</b-button>
                </b-col>
            </b-row>
        </b-form>
    </div>
</template>

<script>
import BootstrapVue from "bootstrap-vue"
import "bootstrap-vue/dist/bootstrap-vue.css"

Vue.use(BootstrapVue)

export default {
  data() {
    return {
      states: [],
      cities: [],
      form: {
        state: null,
        city: null,
        message: ""
      }
    }
  },
  created() {
    this.getStates()
  },
  methods: {
    onSubmit() {
      const action = "/api/ombud/"
      axios
        .post(action, this.form)
        .then(response => {
          this.resetForm()
        })
        .catch(error => {
          console.error(error.message)
        })
    },
    getStates() {
      const action = "/api/states"
      axios
        .get(action)
        .then(response => {
          this.states = response.data.data.map(state => ({
            value: { id: state.id, name: state.name },
            text: state.abbr
          }))
        })
        .catch(error => {
          console.error(error)
        })
    },
    getCities(id) {
      const action = "/api/cities/state/" + id
      axios
        .get(action)
        .then(response => {
          this.cities = [
            ...response.data.data.map(city => ({
              value: { id: city.id, name: city.name },
              text: city.name
            }))
          ]
        })
        .catch(error => {
          console.error(error)
        })
    },
    resetForm() {
      this.form = {
        state: null,
        city: null,
        message: ""
      }
    }
  }
}
</script>