title: Vue.js no event emitted between child and parent components
body: <p>I am having a component below with modal form</p>
  
  <pre><code>&lt;div&gt;
  &lt;b-alert variant="danger" :show="errorAlert"&gt;
      &lt;pre class="my-4"&gt;Something went wrong&lt;/pre&gt;
      &lt;pre class="my-4"&gt;Message: {{errorMsg}}&lt;/pre&gt;
      &lt;p class="my-4"&gt;Status: {{statusCode}}&lt;/p&gt;
  &lt;/b-alert&gt;
  
  &lt;div v-if="!errorAlert"&gt;
      &lt;b-row&gt;
          &lt;b-col cols="1"&gt;
          &lt;b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" /&gt;
          &lt;/b-col&gt;
  
          &lt;b-col cols="2"&gt;
      &lt;b-button size="md" variant="success" v-b-modal.announceModal&gt;
              Announce new
          &lt;/b-button&gt;
  
              &lt;b-modal id="announceModal" title="Announce a tournament" @ok="handleOK" @cancel="handleCancel" &gt;
                  &lt;AnnounceForm /&gt;
              &lt;/b-modal&gt;
          &lt;/b-col&gt;
      &lt;/b-row&gt;
          &lt;b-table striped hover responsive :items="tournaments" :fields="fields"
               :per-page="perPage" :current-page="currentPage"&gt;&lt;/b-table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Its buttons should emit events to the form via these handlers</p>
  
  <pre><code> handleOK(){
              this.$emit('submit');
          },
          handleCancel(){
              this.$emit('reset');
          }
  </code></pre>
  
  <p>Child form</p>
  
  <pre><code>&lt;div&gt;
  &lt;b-form @sumbit="announceTournament" @reset="resetForm" ref="announce"&gt;
      &lt;b-form-group id="nameGroup"
                    label="Tournament name:"
                    label-for="nameInput"&gt;
          &lt;b-form-input id="nameInput"
                        type="text"
                        v-model="tournament.name"
                        required
                        placeholder="Enter name"&gt;
          &lt;/b-form-input&gt;
      &lt;/b-form-group&gt;
      &lt;b-form-group id="depositGroup"
                    label="Tournament deposit:"
                    label-for="depositInput"&gt;
          &lt;b-form-input id="depositInput"
                        type="text"
                        v-model="tournament.deposit"
                        required
                        placeholder="Enter deposit"&gt;
          &lt;/b-form-input&gt;
      &lt;/b-form-group&gt;
  &lt;/b-form&gt;
  </code></pre>
  
  <p></p>
  
  <p>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?</p>