A Vue component I've created is using v3's composition API:
<template>
<input type="checkbox" v-model="playing" id="playing" @input="$emit('play', $event.target.value)" />
<label for="playing" >{{ playing ? 'Pause' : 'Play' }}</label>
</template>
<script>
export default {
props: {
done: Boolean
},
setup(props) {
const playing = ref(true)
watchEvent(() => {
if (props.done) {
playing.value = false
this.$emit('play', playing.value)
}
}
return { playing }
}
}
</script>
After running the watchEvent, an error occurs stating
Cannot read property "$emit" of undefinedIt appears that this remains undefined within the setup() function regardless of whether it's a regular function or an arrow function.