Vue method to list each object in an array of objects leads to errors

This is the dropdown component used to give a list of all grids in all pages. There are multiple pages and grids within those pages.

    <v-dropdown
        :items="pageGrids"
        :item-text="gridNamesAndPages"
        return-object
    />

gridNamesAndPages is under methods:

    gridNamesAndPages: item => item.name + ' • (Page: ' + item.page_name.name + ')',

This is the method used to assign the empty array summaryGrids to all grids for this project:

    getAllPageGrids() {
        apiClientGet(
            routes["pages.getAllPageGrids"],
            null,
            response => {
                this.pageGrids.push(response.data);
            }
        );
    },

The function in the controller:

    public function getAllPageGrids()
    {
        return Auth::user()->client->grids()->get();
    }

SummaryGrids are in this format. There could be multiple grids so whilst this only shows 3 there could be 100:

    [
        {
            "id": 3,
            "name": "AS",
            "grid_cols": [
                {
                    "id": 16,
                    "grid_id": 3,
                    "order": 1,
                    "header": "Col 1",
                }
            ],
            "page_name": {
                "name": "Page 1"
            }
        },
        {
            "id": 4,
            "name": "SF",
            "grid_cols": [
                {
                    "id": 21,
                    "grid_id": 4,
                    "header": "Name",
                },
                {
                    "id": 22,
                    "grid_id": 4,
                    "header": "Reference",
                }
            ],
            "page_name": {
                "name": "Page 1"
            }
        },
        {
            "id": 5,
            "name": "WE",
            "grid_cols": [
                {
                    "id": 24,
                    "grid_id": 5,
                    "header": "Name",
                }
            ],
            "page_name": {
                "name": "Page 2"
            }
        }
    ]

However I continue to get this error:

I can't see anything wrong with the way the code is structured. Would anyone know if I've actually written it incorrectly?

(On request I've also included the custom v-dropdown component)

<template>
    <v-select
        :class="`text-field-${color || 'white'}`"
        outlined dense
        v-on="$listeners" v-bind="$attrs"
    >
        <slot>
            <!--  -->
        </slot>
    </v-select>
</template>

<script>

export default {
    props: {
        color: {
            type: String|null,
            default: null
        }
    },
};
</script>