How can I pass data props to a component slot in vue to use as v-model

Question

I have a vue component that I use for a page layout in a laravel app. The layout is to display data in table format. Each page has a form with different inputs/selects to filter the data.

I'm using vue 2. I'm not sure how I can create dynamic properties on layout-component.vue. The properties will be used on the params/form inputs for v-model.

Below are the components.

layout-component.vue

<template>
    <div>
        <div v-if="hasSlot('form')">
            <form v-on:submit.prevent="emitFormValues">

                <input type="hidden" name="per_page" v-model="per_page">
                <input type="hidden" name="page" v-model="page">

                <div>
                    <!-- Form Slot -->
                    <slot name="form"></slot>

                    <div>
                        <button-component icon="search" type="submit" label="Filter"></button-component>
                    </div>
                </div>
            </form>
        </div>

        ...rest of layout
    </div>
</template>

page-a-component.vue

<template>
    <layout-component v-on:form-submitted="handleFormSubmission">
        <template v-slot:form>
            <select v-model="params.input_a" name="input_a" id="input_a" :value="params.input_a">
                <option></option>
            </select>

            <input v-model="params.input_b" name="input_b" id="input_b" :value="params.input_b"></input>
        ... more inputs/selects
        </template>

        ...rest of layout/results
    </layout-component>
</template>

<script>
export default {

    data: () => ({
        results: [],
        params: {
            input_a: null,
            input_b: null,
            page: 1,
            per_page: 15
        }
    }),
};
</script>

page-b-component.vue

<template>
    <layout-component v-on:form-submitted="handleFormSubmission">
        <template v-slot:form>
            <select v-model="params.diff_input_a" name="diff_input_a" id="diff_input_a" :value="params.diff_input_a">
                <option></option>
            </select>

            <input v-model="params.diff_input_b" name="diff_input_b" id="diff_input_b" :value="params.diff_input_b"></input>
        ... more inputs/selects
        </template>

        ...rest of layout/results
    </layout-component>
</template>

<script>
export default {

    data: () => ({
        results: [],
        params: {
            diff_input_a: null,
            diff_input_b: null,
            page: 1,
            per_page: 15
        }
    }),
};
</script>

page-a.blade.php

<page-a-component></page-a-component>

page-b.blade.php

<page-b-component></page-b-component>

It feels like I'm repeating myself a lot in page-N-component.vue when all I really need to change to is the params and form inputs/selects.

How can I just use the page component in a blade template and not need page-N-componet.vue? I would like page-a.blade.php and page-b.blade.php to look like below.

<layout-component v-on:form-submitted="handleFormSubmission">
        <template v-slot:form>
            ... ADD FORM INPUTS/PARAMS
        </template>

        ...rest of layout/results
</layout-component>