Показать данные в Ag Grid Vue

Question

Я пытаюсь загрузить данные в таблицу VueJS, используя плагин ag Grid vue, который есть в шаблоне. Я пробовал несколько способов, но не получил желаемый результат ..., получая следующий результат:

{
"users": [
{
"id": 1,
"client_id": 1,
"cop_id": null,
"role_id": null,
"name": "Bart",
"email": "correo.123@gmail.com",
"created_at": null,
"updated_at": null
}
]
}

тогда у меня есть мое представление Vue таким образом, и извините за включение всего кода, но так как шаблон работает со всем, что приходит, я предпочитаю доставлять все подробно, я пытался внести изменения в созданный метод с помощью ax ios, но у меня это не получилось. Это работает, к сожалению, я не могу загрузить данные в таблицу, надеюсь, вы поможете мне исправить мою ошибку загрузки.

<template>

  <div id="page-user-list">
      <!-- AgGrid Table -->
      <ag-grid-vue
        ref="agGridTable"
        :components="components"
        :gridOptions="gridOptions"
        class="ag-theme-material w-100 my-4 ag-grid-table"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :rowData="rowData"
        rowSelection="multiple"
        colResizeDefault="shift"
        :animateRows="true"
        :floatingFilter="true"
        :pagination="true"
        :paginationPageSize="paginationPageSize"
        :suppressPaginationPanel="true"
        :enableRtl="$vs.rtl">
      </ag-grid-vue>

      <vs-pagination
        :total="totalPages"
        :max="10"
        v-model="currentPage" />
  </div>

</template>

<script>
import { AgGridVue } from "ag-grid-vue"
import '@sass/vuexy/extraComponents/agGridStyleOverride.scss'
import vSelect from 'vue-select'

import axios from 'axios'

// Store Module
//import moduleUserManagement from '@/store/user-management/moduleUserManagement.js'

// Cell Renderer
import CellRendererLink from "./cell-renderer/CellRendererLink.vue"
import CellRendererStatus from "./cell-renderer/CellRendererStatus.vue"
import CellRendererVerified from "./cell-renderer/CellRendererVerified.vue"
import CellRendererActions from "./cell-renderer/CellRendererActions.vue"

export default {
  components: {
    AgGridVue,
    vSelect,

    // Cell Renderer
    CellRendererLink,
    CellRendererStatus,
    CellRendererVerified,
    CellRendererActions,
  },
  data() {
    return {

      // Filter Options
      roleFilter: { label: 'Todos', value: 'all' },
      roleOptions: [
        { label: 'Todos', value: 'all' },
        { label: 'Administador', value: 'admin' },
        { label: 'Usuario', value: 'user' },
        { label: 'Staff', value: 'staff' },
      ],

      statusFilter: { label: 'Todos', value: 'all' },
      statusOptions: [
        { label: 'Todos', value: 'all' },
        { label: 'Activo', value: 'active' },
        { label: 'Desactivado', value: 'deactivated' },
        { label: 'Bloqueado', value: 'blocked' },
      ],

      isVerifiedFilter: { label: 'Todos', value: 'all' },
      isVerifiedOptions: [
        { label: 'Todos', value: 'all' },
        { label: 'Si', value: 'yes' },
        { label: 'No', value: 'no' },
      ],

      departmentFilter: { label: 'Todos', value: 'all' },
      departmentOptions: [
        { label: 'Todos', value: 'all' },
        { label: 'Vendido', value: 'sales' },
        { label: 'Departamento', value: 'development' },
        { label: 'Administrado', value: 'management' },
      ],

      searchQuery: "",

      // AgGrid
      gridApi: null,
      gridOptions: {},
      defaultColDef: {
        sortable: true,
        resizable: true,
        suppressMenu: true
      },
      columnDefs: [
        {headerName: 'ID', field: 'id', width: 125, filter: true, checkboxSelection: true, headerCheckboxSelectionFilteredOnly: true, headerCheckboxSelection: true },
        {headerName: 'Username', field: 'client_id', filter: true, width: 210, cellRendererFramework: 'CellRendererLink'},
        {headerName: 'Email', field: 'email', filter: true, width: 225 },
        {headerName: 'Nombre', field: 'name', filter: true, width: 200 },
        {headerName: 'Comuna', field: 'cop_id', filter: true, width: 150},
        {headerName: 'Role', field: 'role_id', filter: true, width: 150},
        {headerName: 'Acciones',  width: 150, cellRendererFramework: 'CellRendererActions'},
      ],

      // Cell Renderer Components
      components: {
        CellRendererLink,
        CellRendererStatus,
        CellRendererVerified,
        CellRendererActions,
      }
    }
  },
  watch: {
    roleFilter(obj) {
      this.setColumnFilter("role", obj.value)
    },
    statusFilter(obj) {
      this.setColumnFilter("status", obj.value)
    },
    isVerifiedFilter(obj) {
      let val = obj.value === "all" ? "all" : obj.value == "yes" ? "true" : "false"
      this.setColumnFilter("is_verified", val)
    },
    departmentFilter(obj) {
      this.setColumnFilter("department", obj.value)
    },
  },
  computed: {
    usersData() {
      return this.users.data
    },
    paginationPageSize() {
      if(this.gridApi) return this.gridApi.paginationGetPageSize()
      else return 10
    },
    totalPages() {
      if(this.gridApi) return this.gridApi.paginationGetTotalPages()
      else return 0
    },
    currentPage: {
      get() {
        if(this.gridApi) return this.gridApi.paginationGetCurrentPage() + 1
        else return 1
      },
      set(val) {
        this.gridApi.paginationGoToPage(val - 1)
      }
    }
  },
  methods: {
    setColumnFilter(column, val) {
      const filter = this.gridApi.getFilterInstance(column)
      let modelObj = null

      if(val !== "all") {
        modelObj = { type: "equals", filter: val }
      }

      filter.setModel(modelObj)
      this.gridApi.onFilterChanged()
    },
    resetColFilters() {
      // Reset Grid Filter
      this.gridApi.setFilterModel(null)
      this.gridApi.onFilterChanged()

      // Reset Filter Options
      this.roleFilter = this.statusFilter = this.isVerifiedFilter = this.departmentFilter = { label: 'All', value: 'all' }

      this.$refs.filterCard.removeRefreshAnimation()
    },
    updateSearchQuery(val) {
      this.gridApi.setQuickFilter(val)
    }
  },

  created(){
      //let users = /apps/user/user-list/
      axios.get('api/users')
      .then(res => {
          let users = res.data.users;
      })
  }
}

</script>

<style lang="scss">
#page-user-list {
  .user-list-filters {
    .vs__actions {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-58%);
    }
  }
}
</style>