DataTable/Paginator: Paginator does not display when the flag turns from false => true

[kennylam91]

Describe the bug

The paginator of Datatable doesn't work properly when the flag paginator switches from true => false => true and the paginatorTemplate has breakPoints

Reproducer

https://stackblitz.com/edit/primevue-3-vite-issue-template-uluatn?file=src%2FApp.vue

PrimeVue version

3.41.1

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

Chrome 130

Steps to reproduce the behavior

<DataTable
  :paginator="hasPaginator"
  :paginatorTemplate="{
            '769px': 'PrevPageLink CurrentPageReport NextPageLink RowsPerPageDropdown',
            default: 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink RowsPerPageDropdown',
          }
    "
/>

Note that the issue only happens in production, not in dev.

When the flag hasPaginator = true => the paginator displays: OK Then the flag hasPaginator = false => the paginator disappears: OK Then the flag hasPaginator = true => the paginator still disappears, there's an error in console log

index-41de7855.js:10 TypeError: this.template[n].split is not a function
    at Proxy.templateItems (DataTable.vue_vue_ty…c04494fc.js:169:647)
    at ha.run (index-41de7855.js:10:16094)
    at get value (index-41de7855.js:10:24787)
    at Object.get [as templateItems] (index-41de7855.js:10:44237)
    at Proxy.ni (DataTable.vue_vue_ty…04494fc.js:169:2113)
    at Bi (index-41de7855.js:10:28263)
    at ha.I [as fn] (index-41de7855.js:10:56932)
    at ha.run (index-41de7855.js:10:16094)
    at b.update (index-41de7855.js:10:57203)
    at de (index-41de7855.js:10:57229)

After looking at the Paginator component:

templateItems() {
            let keys = {};

            if (this.hasBreakpoints()) {
                keys = this.template;

                if (!keys.default) {
                    keys.default = 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown';
                }

                for (const item in keys) {
                    keys[item] = this.template[item].split(' ').map((value) => {
                        return value.trim();
                    });
                }

                return keys;
            }

            keys['default'] = this.template.split(' ').map((value) => {
                return value.trim();
            });

            return keys;
        }

I see that the prop template is modified from {'769px': 'PrevPageLink CurrentPageReport ...'} to {'769px': ['PrevPageLink, CurrentPageReport, ..]'} => this.template[item].split is not a function

Expected behavior

The paginator should working properly