[2729] Nuxt apollo subscription 400 (Bad Request)

I am trying to create a nuxt app using apollo with a graphql subscription, but every time I try to fetch data from the graphql server I get: Failed to load resource: the server responded with a status of 400 (Bad Request)

I have the same setup in a regular vue app which works perfectly. Both are using vuex for local storage while querying graphql for data.

My store:

const createStore = () => {
  return new Vuex.Store({
    state: {
      projects: [],
      projectObservable: null,
      projectObserver: null
    },
    actions: {
      FETCH_PROJECTS ({ commit }) {
        if (!this.projectObservable) {
          this.projectObservable = this.app.apolloProvider.defaultClient.subscribe({
            query: PROJECT_SUBSCRIPTION
          })
        }
      },
      // You call this action to start the sunscription
      SUBSCRIBE_TO_PROJECTS ({ commit }) {
        console.log(this.projectObservable)
        this.projectObserver = this.projectObservable.subscribe({
          next (data) {
            let project = data.data.Project
            // then call your store mutation as usual
            switch (project.mutation) {
              case 'CREATED':
                commit('ADD_PROJECT', project.node)
                break
              case 'UPDATED':
                commit('UPDATE_PROJECT', project.node)
                break
              case 'DELETED':
                commit('DELETE_PROJECT', project.previousValues)
                break
            }
          },
          error (error) {
            console.log(error)
          }
        })
      },
      // You call this action to stop the subscription
      UNSUBSCRIBE_FROM_PROJECTS (context) {
        if (this.projectObserver) {
          this.projectObserver.unsubscribe()
          this.projectObserver = null
        }
      }
    },
    mutations: {
      SET_PROJECTS (state, projects) {
        state.projects = projects || null
      },
    }
  })
}
export default createStore

The project subscription:

export const PROJECT_SUBSCRIPTION = gql`
  subscription newProjects {
    Project (
      filter: {
        mutation_in: [CREATED]
      }
    ) {
      mutation
      node {
        id
        name
      }
    }
  }

My component

import createProject from '~/components/createProject'
import { mapGetters } from 'vuex'

export default {
  name: 'projects',
  data () {
    return {
      allProjects: [],
    }
  },
  components: {
    createProject
  },
  computed: {
    ...mapGetters([
      'projects'
    ]),
    projectSubscription () {
      return this.$store.state.projectSubscription
    },
    subscriptionButtonText () {
      return this.subscribed ? 'Unsubscribe' : 'Subscribe'
    }
  },
  created () {
    this.$store.dispatch('FETCH_PROJECTS')
    this.$store.dispatch('SUBSCRIBE_TO_PROJECTS')
  },
  destroyed () {
    this.$store.dispatch('UNSUBSCRIBE_FROM_PROJECTS')
  }
}

Can anyone help and tell me what I am going wrong because I would really like to use nuxt for this project.