AComponent.vue

<template>
    <div>
        <b-form @submit="onSubmit">
            <div class="row justify-content-center">
                <div class="col-md-10">
                    <div class="col-md-6">
                        <b-form-group>
                            <b-form-input id="nome" type="text" v-model="form.nome" required placeholder="Nome *"></b-form-input>
                        </b-form-group>
                        <b-form-group>
                            <b-form-input id="email" type="email" v-model="form.email" required placeholder="Email *"></b-form-input>
                        </b-form-group>
                        <b-form-group>
                            <b-form-input id="telefone" type="tel" v-model="form.telefone" required placeholder="Telefone *"></b-form-input>
                        </b-form-group>
                        <b-row>                   
                            <b-col md="4">
                                <b-form-group>
                                    <b-form-select @change="getCities(form.estado)" id="estados" required v-model="form.estado" :options="estados">
                                        <option :value="null" disabled>UF *</option>
                                    </b-form-select>
                                </b-form-group>
                            </b-col>
                            <b-col md="8">
                                <b-form-group>
                                    <b-form-select id="cidades" :disabled="form.estado == null" required v-model="form.cidade" :options="cidades">
                                        <option :value="null" disabled>Cidade *</option>
                                    </b-form-select>
                                </b-form-group>
                            </b-col>
                        </b-row>
                        <div class="border border-dark">
                            <b-form-group label="Interesse (selecione uma ou mais alternativas) *" >
                                <b-form-checkbox-group id="interesse" v-model="form.interesse" :options="services"></b-form-checkbox-group>
                            </b-form-group>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <b-form-group>
                            <b-form-textarea id="descricao" v-model="form.descricao" placeholder="Breve Apresentação *" :rows="5" :max-rows="6"></b-form-textarea>                            
                        </b-form-group>
                        <div class="border border-dark">
                            <b-form-group label="Anexar curriculo * (Formatos: *.pdf / *.doc / *.docx)">
                                <b-form-file id="curriculo" v-model="form.curriculo" class="mt-3" plain></b-form-file>
                            </b-form-group>
                        </div>
                        <b-button class="float-right mt-5" type="submit" variant="primary">Enviar</b-button>
                    </div>
                </div>
            </div>
        </b-form>
    </div>
</template>

<script>

    import BootstrapVue from 'bootstrap-vue'        
    import 'bootstrap-vue/dist/bootstrap-vue.css'
    Vue.use(BootstrapVue)

    export default {
        data () {
            return {
                services: [],
                estados: [],
                cidades: [],
                form: {
                    nome: '',
                    email: '',
                    telefone: '',
                    estado: null,
                    cidade: null,
                    interesse: '',
                    descricao: '',
                    curriculo: '',
                },                
            }
        },
        created () {
            this.getServices(),
            this.getStates()
        },
        // watch: {
        //     estado: () {

        //     },
        // },
        methods: {
            onSubmit (evt) {
                evt.preventDefault();
                alert(JSON.stringify(this.form));
            },            
            getServices(){
                const action = '/api/services-titles'
                axios.get(action).then(response => {
                    this.services = response.data
                }).catch(error => {
                    console.error(error)
                })
            },
            getStates(){
                const action = '/api/states'
                axios.get(action).then(response => {
                    this.estados = response.data.data.map(estado => ({ value: estado.id, text: estado.abbr }))
                }).catch(error => {
                    console.error(error)
                })
            },
            getCities(id){
                const action = '/api/cities/state/' + id
                console.log(action);

                console.log(this.form.estado);
                
                axios.get(action).then(response => {
                    this.cidades = response.data.data.map(cidade => ({ value: cidade.id, text: cidade.name }))
                    console.log(this.cidades);                    
                }).catch(error => {
                    console.error(error)
                })
            },
        },
    }
</script>

<style lang="sass" scoped>
.col-md-6
    float: left
</style>