How to emit data from custom Vue extension to editor in TipTap?

[Arturexe]

I am trying to emit data from my custom vue extension component in tiptap to its parent editor but I can't get it to work.

vue-component.vue:

<script setup>
import {NodeViewWrapper} from '@tiptap/vue-3'

const props = defineProps({
    node: {
        type: Object,
        required: true
    },
    updateAttributes: {
        type: Function,
        required: true,
    }
})

const emitDataToEditor = () => {
    props.updateAttributes({
        size: 'small'
    })
}
</script>


<template>
  <node-view-wrapper class="vue-component" data-drag-handle="">
    <button type="button" @click="emitDataToEditor">push</button>
  </node-view-wrapper>
</template>

The emitDataToEditor function updates the props.node.attrs.size prop but how do I access the prop in the parent editor?

editor.vue (only editor config):

const editor = useEditor({
    extensions: [
        StarterKit,
        TextAlign.configure({ types: ['heading', 'paragraph'] }),
        Underline,
        Link,
        VueComponent.extend({
                name: 'vueComponent',
                group: 'block',
                draggable: true,
                addAttributes() {
                    return {
                        size: ''
                    }
                },
            }
        ),
    ],
    content: props.modelValue,
    onUpdate: ({ editor }) => {
        // How to access emitted prop (node.attrs.size) on update?
        // ???
    },
    editable: props.locked ? false : store.admin
})

Extension.js:

import {Node, mergeAttributes} from '@tiptap/core'
import {VueNodeViewRenderer} from '@tiptap/vue-3'
import Component from '@/views/components/vue-component.vue'

export default Node.create({
    parseHTML() {
        return [{ tag: 'vue-component' }]
    },
    renderHTML({ HTMLAttributes }) {
        return ['vue-component', mergeAttributes(HTMLAttributes)]
    },
    addNodeView() {
        return VueNodeViewRenderer(Component)
    },
})

[Capyhw]

pinia