Re-using component structure over multiple pages

Page.vue

<template>
  <div>
    <model-overview
      :title="title"
      :models="models"
      @select="changeModel"
      @add="createModel"
    />
  
    <complex-form
      v-if="selectedModel"
      @update="updateModel"
      :schema="formSchema"
    />
    
    <slot v-else name="emptyState" />
  </div>
</template>

<script>
export default {
  name: 'FormPage',
  props: ['api'],
  methods: {
    createModel() {
       this.api.create();
    },
    ...
  }
};
</script>

PageOne.vue

<template>
  <form-page
    title="Page One"
    :api="api"
  >
    <template slot="empty-state">
      Empty state for page one
    </template>
  </form-page>
</template>

<script>
export default {
  data() {
    return {
      api: { create() { axios.post('/model-one/') },
    };
  }
};
</script>

PageTwo.vue

<template>
  <form-page
    title="Page Two"
    :api="api"
  >
    <template slot="empty-state">
      Empty state for page two
    </template>
  </form-page>
</template>

<script>
export default {
  data() {
    return {
      api: { create() { axios.post('/model-one/') },
    };
  }
};
</script>