Render Tiptap Table from a custom node that renders Vue Component using VueNodeViewRenderer(VueComponent)

I am trying to extend tiptap table extention that renders a vuecomponent as I want to add a button obove the table. I am trying the following code and when I call setTable(), it does not renders a 3 row and columns table as it does when I remove the addNodeView function.

I want to be able to insert a default table using commands.insertTable({ rows: 3, cols: 3, withHeaderRow: true }) that renders vue component.

const table = Table.extend({
  name: tableNodeName,
  group: 'block',
  addExtensions () {
    return [TableCell, TableRow, TableHeader]
  },

  addOptions () {
    return {
      ...this.parent?.()
    }
  },
  addAttributes () {
    return {
      ...this.parent?.()
    }
  },
  renderHTML ({ HTMLAttributes }) {
    return ['div', { class: 'table-wrapper' }, ['table', HTMLAttributes, ['tbody', 0]]]
  },

  addNodeView () {
    return VueNodeViewRenderer(TiptapTable)
  },

  addCommands () {
    return {
      ...this.parent?.(),
      setTable: () => ({ commands }) => commands.insertTable({ rows: 3, cols: 3, withHeaderRow: true })
    }
  }
})

TiptapTable.vue

<script setup lang="ts">
import { defineProps } from 'vue'
import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-3'

// Define props from NodeViewProps
const props = defineProps({
  ...nodeViewProps
})
</script>

<template>
  <NodeViewWrapper>
    <h2>Table</h2>
    <table>
      <NodeViewContent as="tbody" />
    </table>
  </NodeViewWrapper>
</template>