Yield and Section but for Vue JS

Have you heard of slots? That is what you need here. You could have slots for your thead and tbody, or you could even use scoped slots for each row iteration.

https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots

thanks @wilk_randall.

I tried this a while ago...

On my "Master.vue" file

<template>
    <div id="records-wrapper">

        <div class="uk-alert" v-show="hasNoData">No books found.</div>
        
        <div v-show="!hasData" uk-spinner></div>

        <table class="uk-table uk-table-divider uk-inline" v-show="hasData">
            <slot name="content"></slot>
            
            <div v-show="loading" class="uk-overlay-default uk-position-cover">
                <div class="uk-position-center">
                    <span uk-spinner></span>
                </div>
            </div>
        </table>

        <pager :dataSet="dataSet" @changed="fetch"></pager>
    </div>
</template>

<script>
    import DataViewer from "../mixins/DataViewer";
    import Actions from "../mixins/Actions";

    export default{
        mixins: [DataViewer, Actions],

        created(){
            this.fetch(1);
        }
    }
</script>

And then on my Books.vue file

<template>
    <div slot="content">
        <thead>
            <tr>
                <th></th>
                <th>ID</th>
                <th>Title</th>
                <th>Description</th>
                <th class="uk-text-capitalize">
                    <a href="#" uk-icon="more"></a>
                    <div uk-dropdown="mode: click; pos: bottom-right">
                        <ul class="uk-nav uk-dropdown-nav">
                            <li>
                                <a href="#" @click="confirmPurge" v-show="hasSelected">Remove marked items</a>
                            </li>
                            <li v-show="!hasSelected">No selected items</li>
                        </ul>
                    </div>
                </th>
            </tr>
        </thead>

        <tbody>
            <tr v-for="item in items">
                <td><input type="checkbox" class="uk-checkbox" v-model="selected" :value="item.id"></td>
                <td>{{ item.id }}</td>
                <td>{{ item.title }}</td>
                <td>{{ item.description }}</td>
                <td>
                    <a href="#" uk-icon="more"></a>
                    <div uk-dropdown="mode: click; pos: bottom-right">
                        <ul class="uk-nav uk-dropdown-nav">
                            <li><a href="#" @click="edit(item.id, 'books')">Edit</a></li>
                            <li><a href="#" @click="remove(item.id)">Remove</a></li>
                        </ul>
                    </div>
                </td>
            </tr>
        </tbody>
    </div>
</template>

<script>
    import Master from "./Master";

    export default{
        
        extends: Master,

        props: ['src', 'purgeUrl'],
    }
</script>

And then on my blade file i just call

<books src="ajax data" purge-url="route to multidelete"></books>

Yeah it worked but I don't see the "parent" elements like the table, divs and stuff but the ajax call worked..

As far as I know, there isn't similar functionality like you have in blades with vue. The closest you're going to get to that is doing an SPA, but even then it's just not the same. I'm like you and prefer an MPA, so that's something I would be interested in. You just need to be creative with how you structure and organize your components :)

Or divs

That explains it. :)