Page.vue

<script>
export default {
  name: 'Page',

  props: {
    buffer: {
      default: true
    }
  },

  computed: {

    classes () {
      return {
        'c-page-buffer': !!this.buffer,
        'c-page-no-buffer': !this.buffer
      }
    }

  }

}
</script>

<template>
  <div class="c-page">
    <div class="c-page-body">
      <slot />
    </div>
  </div>
</template>

<style lang="scss">

.c-page-body {
  position: relative;

  .c-page-section {
    margin-left: auto;
    margin-right: auto;
    padding: 1.5em;
    
    + .c-page-section {
      padding-top: 0;
    }

  }

}

</style>

PageSection.vue

<script>
export default {
  name: 'PageSection'
}
</script>

<template>
  <div class="c-page-section">
    <div class="c-page-section-content">
      <slot />
    </div>
  </div>
</template>

<style lang="scss">

.c-page-section-content {
  margin-left: auto;
  margin-right: auto;
}

</style>