Vue – Vue3 composition API props receiving problem

I can't get to work in Vue3 this: Counter1 emits value to main App page, App page feeds props of Counter2 component (so Counter2 should basically display data emitted by Counter1):

I can't get it to work and I guess there's more job to be done in Counter2 (I tried with reactive objects etc but no luck).

I have the same example written in Vue2 (one-pager) that you can check out here:

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <script src=""></script>

<div id="app">  
    <Counter1  @counted="handleCount"></Counter1>
    <Counter2 :received="clicksReceivedAndPassedToCounter2"></Counter2>


Vue.component('Counter1', {
 template: `<button @click="handleClick">Clicked {{ clicks }} times</button>`,
 data: () => ({
    clicks: 0
 methods: {
    handleClick() {
        this.$emit('counted', this.clicks);

Vue.component('Counter2', {
 template: `<p>Counter2 received: {{received}}</p>`,
 props: {
     'received': {
         type: Number,
         default: 0,
         required: true
new Vue({
    el: '#app',
    data() {
        return {
            clicksReceivedAndPassedToCounter2: 0
    methods: {
        handleCount(clicksReceived) {
            this.clicksReceivedAndPassedToCounter2 = clicksReceived;

Read more here:

Content Attribution

This content was originally published by Dalibor at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: