Vue.js no event emitted between child and parent components

Question

I am having a component below with modal form

<div>
<b-alert variant="danger" :show="errorAlert">
    <pre class="my-4">Something went wrong</pre>
    <pre class="my-4">Message: {{errorMsg}}</pre>
    <p class="my-4">Status: {{statusCode}}</p>
</b-alert>

<div v-if="!errorAlert">
    <b-row>
        <b-col cols="1">
        <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" />
        </b-col>

        <b-col cols="2">
    <b-button size="md" variant="success" v-b-modal.announceModal>
            Announce new
        </b-button>

            <b-modal id="announceModal" title="Announce a tournament" @ok="handleOK" @cancel="handleCancel" >
                <AnnounceForm />
            </b-modal>
        </b-col>
    </b-row>
        <b-table striped hover responsive :items="tournaments" :fields="fields"
             :per-page="perPage" :current-page="currentPage"></b-table>
</div>

Its buttons should emit events to the form via these handlers

 handleOK(){
            this.$emit('submit');
        },
        handleCancel(){
            this.$emit('reset');
        }

Child form

<div>
<b-form @sumbit="announceTournament" @reset="resetForm" ref="announce">
    <b-form-group id="nameGroup"
                  label="Tournament name:"
                  label-for="nameInput">
        <b-form-input id="nameInput"
                      type="text"
                      v-model="tournament.name"
                      required
                      placeholder="Enter name">
        </b-form-input>
    </b-form-group>
    <b-form-group id="depositGroup"
                  label="Tournament deposit:"
                  label-for="depositInput">
        <b-form-input id="depositInput"
                      type="text"
                      v-model="tournament.deposit"
                      required
                      placeholder="Enter deposit">
        </b-form-input>
    </b-form-group>
</b-form>

Child form has these two events (@submit and @reset).Events are default from BootstrapVue Though modal button hadlers work fine no event is emitted. What is missing?

Answer 1

Try to emit on $root instead:

handleOK(){
    this.$root.$emit('submit');
},
handleCancel(){
    this.$root.$emit('reset');
}

Check this answer as it might be related to your problem.