this.$emit() is not a function while trying to change state in parent component from child in composition API in vue 3

Question

//Parent component

<template>
   <childComp @onchangeData='changeData' />
</template>
<script>
   setup() {
   const state = reactive({
     data: 'anything
   });
    
   function changeData(v){
     state.data = v
   }
   return { changeData}
},
</script>

//Child

<template>
 <button @click='change('hello')' />
</template>

<script>
   setup() {

   function change(v){
     this.$emit('onchangeData', v)
   }
   return{change}
},
</script>

I am struggling to change the parents' reactive state from the child's button click. It's saying this.$emit is not a function. I tried many ways like using @onchangeData='changeData()' instead of @onchangeData='changeData', using arrow functions etc. But nothing works. Here, I wrote an example and minimal code to keep it simple. But I hope my problem is clear.

Answer 1

Look at following snippet, this is not the same in composition as in options API, so you need to use emit passed to setup function:

const { reactive } = Vue
const app = Vue.createApp({
  setup() {
    const state = reactive({
      data: 'anything'
    });
    function changeData(v){
       state.data = v
    }
    return { changeData, state }
  },
})
app.component("ChildComp", {
  template: `
    <div>
     <button @click="change('hello')">click</button>
    </div>
  `,
  setup(props, {emit}) {
    function change(v){
      emit('onchangeData', v)
    }
    return { change }
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
   <child-comp @onchange-data='changeData'></child-comp>
   <p>{{ state.data }}</p>
</div>