How to dynamically build up a element ui table

I am trying to integrate Element UI into my Laravel project but so far it is not completely working. What I'm trying to do is create an admin page that has a table that displays my user information from the database. So far I first made it static and after that I'll see if I can make it dynamic as much as possible.

So I created a component:

<template>
    <div>
        <el-table
            ref="singleTable"
            :data="tableData"
            highlight-current-row
            style="width: 100%">
            <el-table-column v-for="column in tableColumns"
                v-bind:property="column.id"
                v-bind:label="column.title"
                v-bind:width="column.width">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [{
                    userid: 'myuser1',
                    fullname: 'User 1',
                    email: '[email protected]'
                }, {
                    userid: 'myuser2',
                    fullname: 'User 2',
                    email: '[email protected]'
                }],
                tableColumns: [{
                    id: 'userid',
                    title: 'User ID',
                    width: '120'
                }, {
                    id: 'fullname',
                    title: 'Full Name',
                    width: '200'
                }, {
                    id: 'email',
                    title: 'Email',
                    width: '200'
                }],
                currentRow: null
            }
        }
    }
</script>

But having to define the columns I want in the data part will force me to create a new table component each time I want a table somewhere.

I would rather have something like below in my blade view:

<my-usertable>
	<header>
		<column id="userid" width="120">User ID</column>
		<column id="fullname" width="200">Full name</column>
		<column id="email" width="200">Email address</column>
	<header>
	<datarow>
		<column id="userid">myuser1</column>
		<column id="fullname">User 1</column>
		<column id="email">[email protected]</column>
	</datarow>
</my-usertable>

Is something like this possible with vue or do I need to define everyting within the vue component itself?

Eventually I would then replace everything within the datarow with information fetched from the database via Laravel. Otherwise I would have to somehow make a request via vue with something like Axios and then store the info into tableData in my vue component?

Thanks