title: Vuejs 3 emit event from child to parent component
body: <p>I've recently started working with VueJS, I'm using v3 and seem to be having an issue calling a method on a parent. The emit function in the child doesn't seem to be emitting the event and nothing is getting picked up in the parent.</p>
  <p>I've included the parent and child to show how I have it set up</p>
  <p><strong>Parent</strong></p>
  <pre><code>&lt;template&gt;
    &lt;First/&gt;
    &lt; Child v-bind:sample=&quot;sample&quot; @enlarge-text=&quot;onEnlargeText&quot;/&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import { defineComponent } from 'vue';
  import axios from 'axios';
  import First from './First.vue';
  import Child from './Child.vue';
  
  export default defineComponent({
    name: 'Container',
    components: {
      First,
      Child,
    },
    methods: {
      onEnlargeText() {
        console.log('enlargeText');
      },
    },
    data: () =&gt; ({
      sample: [],
      parentmessage: '',
    }),
    created() {
      axios.get('http://localhost:8080/getData')
        .then((response) =&gt; {
          console.log(response);
          this.sample = response.data;
        })
        .catch((error) =&gt; {
          console.log(error);
        });
    },
  });
  &lt;/script&gt;
  
  </code></pre>
  <p><strong>Child</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;add&quot;&gt;
      &lt;form id=&quot;signup-form&quot; @submit.prevent=&quot;submit&quot;&gt;
        &lt;label for=&quot;text&quot;&gt;Text:&lt;/label&gt;
        &lt;input type=&quot;text&quot; v-model=&quot;text&quot; required&gt;
        &lt;p class=&quot;error&quot; &gt;{{ error }}&lt;/p&gt;
        &lt;div class=&quot;field has-text-right&quot;&gt;
          &lt;button type=&quot;submit&quot; class=&quot;button is-danger&quot;&gt;Submit&lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
      &lt;button v-on:click=&quot;tryThis&quot;&gt;
        Enlarge text
      &lt;/button&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import { defineComponent, ref } from 'vue';
  import axios from 'axios';
  
  interface SampleInterface {
    text: string;
    error: string;
  }
  
  export default defineComponent({
    name: 'Add',
    data: (): AddInterface =&gt; ({
      text: '',
      error: '',
    }),
    methods: {
      tryThis() {
        this.$emit('enlarge-text');
      },
      submit() {
        this.$emit('enlarge-text');
      },
    },
  });
  &lt;/script&gt;
  </code></pre>
  <p>How should this be done? Is there something I've missed?</p>
  <p>I was wondering can I still use <code>$emit</code> here?</p>