My app has a Home vue component and an AgGrid vue component. AgGrid is rendered inside Home and contains the actual AG-Grid and Home looks like this:

<template>
  <AgGrid :rows="rows" :columns="columns" />
</template>

<script setup>
  import { ref, onBeforeMount } from 'vue'
  import AgGrid from '@/components/AgGrid.vue'
  import { rows, columns } from '@/services/connector'

  const rows = ref()
  const columns = ref()

  onBeforeMount(async () => {
    rows.value = rows()
    columns.value = columns()
 })
</script>

AgGrid looks like this:

<template>
  <AgGridVue
      :rowData="rows"
      :columnDefs="columns"
    />
</template>

<script setup>
  import 'ag-grid-community/styles/ag-grid.css'
  import { AgGridVue } from 'ag-grid-vue3'
  import { ref } from 'vue'

  const props = defineProps({
    rows: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    }
  })
</script>

How do I access the AG-Grid Grid API of AgGrid from Home?