Как VueComponent обратиться к Базе данных, чтобы вывести их списком в таблице?

Question

[Graun]

Здравствуйте, работаю в Laravel. Подскажите, как VueComponent можно обратиться к Базе данных, чтобы вывести их списком в таблице на экран. Нашёл библиотеку elemen-plus. Но мне не понятно как это сделать, подскажите кто знает.

<template>
  <el-table :data="tableData" style="width: 100%" max-height="250">
    <el-table-column fixed prop="date" label="Date" width="150" />
    <el-table-column prop="name" label="Name" width="120" />
    <el-table-column prop="state" label="State" width="120" />
    <el-table-column prop="city" label="City" width="120" />
    <el-table-column prop="address" label="Address" width="600" />
    <el-table-column prop="zip" label="Zip" width="120" />
    <el-table-column fixed="right" label="Operations" width="120">
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click.prevent="deleteRow(scope.$index)"
        >
          Remove
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button class="mt-4" style="width: 100%" @click="onAddItem"
    >Add Item</el-button
  >
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import dayjs from 'dayjs'

const now = new Date()

const tableData = ref([
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
])

const deleteRow = (index: number) => {
  tableData.value.splice(index, 1)
}

const onAddItem = () => {
  now.setDate(now.getDate() + 1)
  tableData.value.push({
    date: dayjs(now).format('YYYY-MM-DD'),
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  })
}
</script>

У меня реализовано так:

<template>
    <label for="short_name_organization" class="form-label">Список (Index)</label>
     <div>
        <table class="table">
            <thead>
            <tr>
<!--                <th scope="col">#</th>-->
                <th scope="col">Name</th>
                <th scope="col">Model</th>
                <th scope="col">Zavodskoy_nomer</th>
                <th scope="col">Edit</th>
                <th scope="col">Delete</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="spisok in poluhenie">
                <td>{{ spisok.name }}</td>
                <td>{{ spisok.model }}</td>
                <td>{{ spisok.zavodskoy_nomer }}</td>
                <td>
                    <router-link :to="{name: 'oborudovanies.edit', params: {id: spisok.id}}">Edit</router-link>
                </td>
                <td>
                    <a @click.prevent="deletePoluhenie(spisok.id)" href='#' class="btn btn-outline-danger">Delete</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    name: "IndexComponent",

    data(){
        return{
            poluhenie: null
            // editStrokaId: null,
            //Слудующие строки инициализируем для "input" служащих для заполнения полей, которые обновляеют строки
            // name: null,
            // model: null,
            // zavodskoy_nomer: null

        }
    },

    mounted() {
        this.getPoluhenie() //название должно совпадать с "methods"
    },

    methods: {
        getPoluhenie(){
            axios.get('/api/oborudovanies') // axios.get('/api/Указываем название "prefix")
                .then(res => {
                    this.poluhenie = res.data.data;
                })
        },
        deletePoluhenie(id){
            axios.delete('/api/oborudovanies/' + id) // axios.get('/api/Указываем название "prefix")
                .then(res => {
                    this.getPoluhenie();
                })
        },
    }
}
</script>

<style scoped>

</style>