Subscriptions - Vue-Apollo with AWS AppSync - Unhandled GraphQL subscription error

Following a great AppSync w/ Vue-Apollo article however it stops short of implementing subscriptions.

I see the following error in the chrome console:

Unhandled GraphQL subscription error TypeError: Cannot read property 'subscription' of undefined at SubscriptionHandshakeLink.request (subscription-handshake-link.js?419e:161)

I have done the following to no avail:

main.js

import AWSAppSyncClient from "aws-appsync";
import VueApollo from "vue-apollo";
import appSyncConfig from "@/assets/AppSync";

const client = new AWSAppSyncClient(
  {
    url: appSyncConfig.graphqlEndpoint,
    region: appSyncConfig.region,
    auth: {
      type: appSyncConfig.authenticationType,
      apiKey: appSyncConfig.apiKey
    }
  },
  {
    defaultOptions: {
      watchQuery: {
        fetchPolicy: "cache-and-network"
      }
    }
  }
);

const appsyncProvider = new VueApollo({
  defaultClient: client
});

window.App = new Vue({
  el: "#app",
  provide: appsyncProvider.provide(),
  render: h => h(App),
});

Tasks.vue

<script>
import gql from "graphql-tag";
import ListTasks from '@/api/queries/ListTasks'

export default {
  data: () => ({
    taskname: '',
    id: "test",
    tasks: []
  }),

  apollo: {
    tasks: {
      query: () => ListTasks,
      subscribeToMore: {
        document: gql`subscription items($id: String!) {
          onCreateTask(id: $id) {
            id
            completed
          }
        }`,
        // Variables passed to the subscription. Since we're using a function,
        // they are reactive
        variables () {
          return {
            id: this.id,
          }
        }
      },
      update: data => data.listTasks.items
    }
  }
}

</script>