title: vue 3 emit warning " Extraneous non-emits event listeners"
body: <p>I am trying to emit data from child to parent using the composition API</p>
  <p>I get the following warning.</p>
  <blockquote>
  <p>[Vue warn]: Extraneous non-emits event listeners (updatedcount) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the &quot;emits&quot; option.at &lt;HelloWorld onUpdatedcount=fn &gt; at </p>
  </blockquote>
  <p>childcomponent.vue</p>
  <pre class="lang-js prettyprint-override"><code>
  &lt;template&gt;
    &lt;h1&gt;{{ store.count }}&lt;/h1&gt;
    &lt;button @click=&quot;fired&quot;&gt;click me&lt;/button&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import useStore from &quot;../store/store.js&quot;;
  export default {
    name: &quot;HelloWorld&quot;,
    setup(_,{ emit }) {
      const store = useStore();
  
      const fired = () =&gt; {
        store.count++;
        emit(&quot;updatedcount&quot;, store.count);
      };
  
      return {
        store,
        fired
      };
    },
  };
  &lt;/script&gt;
  
  
  </code></pre>
  <p>parentcomponent.vue</p>
  <pre class="lang-js prettyprint-override"><code>
  &lt;template&gt;
    &lt;div&gt;
      {{ hello }}
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;input type=&quot;text&quot; v-model=&quot;hello.searchQuery&quot; /&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;button @click=&quot;hello.count--&quot;&gt;click me too!&lt;/button&gt;
      &lt;hello-world @updatedcount=&quot;mydata&quot; /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import HelloWorld from &quot;./components/HelloWorld.vue&quot;;
  import useStore from &quot;./store/store.js&quot;;
  
  export default {
    components: {
      HelloWorld,
    },
    setup() {
      const hello = useStore();
  
      function mydata(event) {
        console.log(event);
      }
  
      return {
        hello,
        mydata
      };
    },
  };
  &lt;/script&gt;
  
  </code></pre>