A single file WordPress component

Sections.vue

<acf>
  return component('sections', [
    'sub_fields' => [
      repeater_field('sections', [
        'sub_fields' => [
          text_field('title'),
          content_field('content', ['media_upload' => 1])
        ]
      ])
    ]
  ]);
</acf>

<php>
  return function($content) {
    $current = explode('/', $_SERVER['REQUEST_URI'])[2];
    $sections = collect($content['sections']);

    $current = $sections->first(function ($section) use ($current) {
      $slug = sanitize_title($section['title']);
      return $current == $slug;
    }, $content['sections'][0]);

    $sections = $sections->map(function ($section) {
      unset($section['content']);

      return $section;
    });

    $sections = $sections->keyBy(function ($section) {
      return sanitize_title($section['title']);
    });

    $content['current'] = $current;
    $content['sections'] = $sections->all();
    $content['url'] = get_permalink();
    $content['api'] = admin_url( 'admin-ajax.php' );
    $content['page'] = get_the_ID();

    return $content;
  };
</php>

<script>
import sections from '../mixins/sections'
import ReadMore from '../partials/ReadMore.vue'
import Pagination from '../partials/Pagination.vue'
import axios from 'axios'

export default {
  mixins: [sections],

  data () {
    return {
      parts: {}
    }
  },

  methods: {
    async open (slug) {
      this.parts = await this.fetch('section', slug)
    }
  },

  components: {
    ReadMore,
    Pagination
  }
}
</script>

<mustache>
  <div class="section">
    <div class="container">
      <div class="columns">
        <div class="column">
          {{{ content.current.content }}}
        </div>
      </div>
    </div>
  </div>
</mustache>

<template>
  <div class="section">
    <div class="container">
      <div class="columns">
        <div class="column is-narrow left">
          <ul class="menu is-size-5">
            <li v-for="(section, i) in content.sections" :key="i">
              <a :href="href(i)" @click.prevent="open(i)" :class="{ 'is-active': isActive(i) }">
                {{ section.title }}
              </a>
            </li>
          </ul>
        </div>
        <div class="column right">
          <read-more :parts="parts"></read-more>

          <pagination class="paginator" @page="open" :sections="content.sections" :active="active"></pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  @import "../bootstrap";

  .section {
    background: black;
    min-height: calc(100vh - 350px - 3.25rem); // header & footer
  }

  .section .content,
  .section /deep/ a,
  .section /deep/ h1, .section /deep/ h2, .section /deep/ h3,
  .section /deep/ strong {
    color: white;
  }

  .section .content /deep/ h2 {
    font-size: 2em;
  }

  .section .content /deep/ em {
    font-style: normal;
    font-weight: 300;
  }

  .left {
    @include tablet { border-right: 1px solid white; }
    padding-right: 10rem;
  }

  .menu a {
    display: block;
    font-size: $size-6;
    margin-bottom: 1rem;
  }

  .menu a:not(.is-active) {
    opacity: 0.44;
  }

  .paginator {
    text-align: center;
  }

  @include tablet {
    .right {
      padding-left: 10rem;
    }

    .paginator {
      display: none;
    }
  }

  @include mobile {
    .menu {
      display: none;
    }
  }

</style>