Extending table funcitionality in Vue template

1

Hello guys, does anybody know, how to insert table in Vue template? In web nothing about it, may be here somebody would give advice how to do it, and in what direction need to keep digging

For example, i have next Vue template:

<template>
  <table>
    <tbody>
      <tr
        v-for="(item, index) in cols"
        :key="index"
      >
        <td
          v-for="(item2, index) in cols"
          :key="index"
        >
          <p><br/></p>
        </td>
      </tr>
    </tbody>
  </table>
</template>

Here i’m passing, cols and rows choosed by user, and everything fine, it’s rendering, however it’s not editable(conteneditable=“false”), and loosing ProseMirror resizing functionality, how to solve it?

And here is schema and command which i’m using to pass data in template:

  // eslint-disable-next-line class-methods-use-this
  get schema() {
    return {
      attrs: {
        width: {
          default: 200,
        },
        height: {
          default: null,
        },
      },
      parseDOM: [
        {
          tag: 'table',
        },
      ],
      toDOM: () => ['table',
        ['tbody', 0],
      ],
    };
  }

  commands({ schema }) {
    const cmds = super.commands({ schema });
    // Command to create custom table
    cmds.createSectionTable = (options) => {
      const { rowsCount } = options;
      const { colsCount } = options;
      const { withHeaderRow } = options;
      this.options.rows = rowsCount;
      this.options.cols = colsCount;

      return (state, dispatch) => {
        const tableNode = createTable(schema, rowsCount, colsCount, withHeaderRow);
        dispatch(
          state.tr.replaceSelectionWith(tableNode).scrollIntoView(),
        );
      };
    };

    return cmds;
  }