component-example.vue

const BaseForm = Vue.extend({
  template: `
    <form>
      <block name="header">
        <h1>{{ title }}</h1>
      </block>
      <block name="content">Form inputs go here</block>
      <block name="actions">
        <button @click="saveRecord">Save</button>
        <button @click="deleteRecord">Delete</button>
      </block>
    </form>
  `,
  data () {
    return {
      title: 'Base Title',
      apiUrl: null,
      record: {}
    }
  },
  methods: {
    saveRecord () {
      // axios.post(this.apiUrl + this.record.id)...
    },
    deleteRecord () {
      // axios.delete(this.apiUrl + this.record.id)...
    }
  }
})

const PersonForm = BaseForm.extend({
  template: `
    <extend>
      <div block="header">
        {{ title }} From Person Form
        <button @click="saveRecord">Save from header</button>
      </div>
      <div block="content">
        <input type="text" v-model="record.name" />
        <input type="text" v-model="record.age" />
        <button @click="incAge">Increase age</button>
      </div>
   </extend>
  `,
  data () {
    return {
      title: 'My Title',
      apiUrl: '/api/my/',
      record: {
        id: 1,
        name: '',
        age: 0
      }
    }
  },
  methods: {
    incAge () {
      this.record.age++
    }
  }
})