presentations/src/components/SessionForm.vue

<template>
  <section class="mt-8">
    <h3 class="text-2xl font-semibold mb-4">Submit a Session</h3>

    <form action="" @submit.prevent="submit">
      <label class="block mb-4">
        Title
        <input name="title" type="text" class="w-full border border-gray-400 p-2 mt-1" v-model="form.title" required/>
      </label>

      <label class="block mb-4">
        Abstract
        <textarea name="title" rows="5" class="w-full border border-gray-400 p-2 mt-1" v-model="form.body" required/>
      </label>

      <input class="cursor-pointer bg-blue-500 hover:bg-blue-700 focus:bg-blue-700 text-gray-100 px-4 py-2 rounded" type="submit" value="Submit session">
    </form>
  </section>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      form: {
        body: '',
        title: '',
        field_session_status: 'accepted',
        field_session_type: 'full',
      }
    }
  },

  methods: {
    submit () {
      const uuid = '11dad4c2-baa8-4fb2-97c6-12e1ce925806' // User 1

      const data = {
        type: 'node--session',
        attributes: this.form,
        relationships: {
          "field_speakers": {
            "data": {
              "type": "user--user",
              "id": uuid
            }
          },
        }
      }

      axios({
        method: 'post',
        url: 'http://drupaltestcamp.docksal/jsonapi/node/session',
        data: { data },
        headers: {
          'Accept': 'application/vnd.api+json',
          'Content-Type': 'application/vnd.api+json',
        }
      })
        .then(({ data }) => {
          this.form.body = ''
          this.form.title = ''
        })
        .catch(function (error) {
          console.log(error)
        });
    }
  }
}
</script>