I have a very basic app that loads an array of notification objects on page load. At the moment for dev purposes this is a hard-coded array of objects in the form of:

var notifications = [
  {
    'Id': 0,
    'Message': 'Lorem ipsum'
  },
  {
    ...
  }
]

Since I wanted this collection to be paged, I have to run some logic during initialization to use only a trimmed-down version of the array.

Initially I tried to include this logic within the setup() of my Vue app, however after further reading of the documentation, this seems like it should only be used to declare variables / functions? This led me to the onMounted() hook which seems to be where I should handle any setup logic.

This is what I have in my app so far:

const { createApp, onMounted, ref } = Vue

  createApp({
    setup() {
        const PAGE_SIZE = 2;
        let pagesToShow = ref(1);
        let pagedResults = ref([]);

        onMounted(() => {
            let itemsToShow = pagesToShow.value * PAGE_SIZE;
            for(let i = 0; i < itemsToShow; i++) {
                if(notifications[i] != undefined)
                    pagedResults.value.push(notifications[i]);
            }
        });

        return {
            pagesToShow,
            pagedResults
        }
    }
  }).mount('#app2')

As you can see, I’m just iterating through my array of objects and trying to add them to my pagedResults just so I have something to render.

However nothing renders on the front-end and I receive this error in the console:

Can anyone help me understand where I’m going wrong?

Thanks