【解決】vxe-tableをCDNで利用するサンプルがちょっと不親切で手間取った

高機能なVueのテーブルコンポーネントvxe-tableをCDNで使いたかったのですが、サンプルが良く分からず。。
あれこれ試して動いたので結果を記録します。

vxe-table

CDNで使いたいなら、以下のように書きましょう、とあります。

<!-- Style -->
<link rel="stylesheet" href="https://unpkg.com/vxe-table@next/lib/style.css">
<!-- Script -->
<script src="https://unpkg.com/xe-utils"></script>
<script src="https://unpkg.com/vxe-table@next"></script>

ん、その後はどう書けばよいのかしら？
コンポーネントが登録できていないのは分かるんだけど、オブジェクトの名前が分かりません。

vue.global.js:1622 [Vue warn]: Failed to resolve component: vxe-table-column
vue.global.js:1622 [Vue warn]: Failed to resolve component: vxe-table

結果

グローバルスコープに定義されていたVXETableの中身を眺めながら試した結果、テーブルが表示できた結果が以下です。

<!-- Style -->
<link rel="stylesheet" href="https://unpkg.com/vxe-table@next/lib/style.css">
<!-- Script -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/xe-utils"></script>
<script src="https://unpkg.com/vxe-table@next"></script>

<!-- Root Component -->
<div id="app">
    <div>
        <!-- vxe-tableコンポーネントにtableDataをバインドする -->
        <vxe-table :data="tableData">
            <!-- 各カラムをvxe-table-columnで定義する -->
            <!-- type="seq"で行番号を表示する -->
            <vxe-table-column type="seq" title="Seq" width="60"></vxe-table-column>
            <!-- tableDataのkey名をfieldとして指定する -->
            <vxe-table-column field="name" title="Name"></vxe-table-column>
            <vxe-table-column field="sex" title="Sex"></vxe-table-column>
            <vxe-table-column field="address" title="Address"></vxe-table-column>
        </vxe-table>
    </div>
</div>

<script>
    // vxe-tableにバインドされるデータ
    const tableData = [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
    ];

    const { createApp } = Vue;
    const app = createApp({
        data(){
            return { tableData }
        },
    });
    app.component('vxe-table', VXETable.Table);
    app.component('vxe-table-column', VXETable.Column);
    app.mount('#app');
</script>

参考