Can't get AlpineJs properly working in controlpanel (AlpineJs is initialized, but template elements not working)

[samjurriaans]

I have the following Html:

@extends('products-api-addon::layout')
@section('title', __('Product Pages'))

@section('content')

    <div class="flex items-center justify-between mb-3">
        <h1>Product Pages</h1>
    </div>

    <div cp-data="productPagesTable(@json($pages->toArray()))" class="card p-0">
        <div class="flex justify-between items-center p-2">
            <select cp-model="rowsPerPage">
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
            </select>
        </div>

        <table class="data-table">
            <thead>
            <tr>
                <th>Title</th>
                <!-- Add other columns as needed -->
            </tr>
            </thead>
            <tbody>
            <template cp-for="page in slicedPages" :key="page.id">
                <tr cp-on:click="navigateToPage(page.id)" class="hover:bg-grey-20 cursor-pointer">
                    <td cp-text="page.title"></td>
                    <!-- Add other cells as needed -->
                </tr>
            </template>
            <tr cp-show="pages.length === 0">
                <td colspan="100%" class="text-center py-4">
                    No pages found.
                    <a href="{{ cp_route('products-api.pages.create') }}" class="btn-primary">Create a page</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

@endsection

Which in essence extends the Statamic control panel layout. So this html file is rendered in the Statamic control panel.

The following is the alpine component itself:

export default (pages) => ({
    pages: [
        {
            id: 1,
            title: 'test',
        },
        {
            id: 2,
            title: 'test2',
        },
        {
            id: 3,
            title: 'test3',
        },
        {
            id: 4,
            title: 'test4',
        },
        {
            id: 5,
            title: 'test5',
        },
        {
            id: 6,
            title: 'test6',
        },
        {
            id: 7,
            title: 'test7',
        },
        {
            id: 8,
            title: 'test8',
        },
        {
            id: 9,
            title: 'test9',
        },
        {
            id: 10,
            title: 'test10',
        },
        {
            id: 11,
            title: 'test11',
        },
    ],
    rowsPerPage: 10,
    init() {
        console.log('from init');
        console.log('given pages', pages);
        console.log("rows: ", this.pages.slice(0, this.rowsPerPage))
    },
    get slicedPages() {
        return this.pages.slice(0, this.rowsPerPage);
    },
    navigateToPage(id) {
        window.location.href = `/products-api/pages/${id}`;
    },
});

With the following file to load Alpine:

import Alpine from 'alpinejs'
import ProductPagesTable from "./components/product-pages-table";

window.CPAlpine = Alpine;

Alpine.prefix('cp-');
Alpine.data('productPagesTable', ProductPagesTable);
Alpine.start();

The following errors shows in the browser console, see images:

The following image shows that the template renders the elements - only the innerloop javascript elements are undefined

Does anyone know whats the problem?