Using XState with Vue 3 + TypeScript + Composition API

[RollingTL]

Hi,
I am trying to use XState with Vue, and all was fine until I decided to move to Vue 3 + TypeScrip + Composition API.
I move Machine Logic to separate file, but failed to make it work. And the weird error behavior upsets me.

useFormStateMachine.ts

import { Machine, interpret } from 'xstate'
import { ref } from 'vue'

type FormStateSchema = {
  states: {
    form: {}
    formInvalid: {}
    submitting: {}
    successInfo: {}
    failInfo: {}
  }
}
type FormEvent =
  | { type: 'SUBMIT' }
  | { type: 'INVALID' }
  | { type: 'SUCCESS' }
  | { type: 'FAILURE' }
  | { type: 'REPEAT' }

const myMachine = Machine<FormStateSchema, FormEvent>({
  key: 'myMachineID',
  initial: 'form',
  states: {
    form: {
      on: {
        SUBMIT: 'submitting',
        INVALID: 'formInvalid'
      }
    },
    formInvalid: {
      on: {
        SUBMIT: 'submitting',
        INVALID: 'formInvalid'
      }
    },
    submitting: {
      on: {
        SUCCESS: 'successInfo',
        FAILURE: 'failInfo'
      }
    },
    successInfo: {
      on: {
        REPEAT: 'form'
      }
    },
    failInfo: {
      on: {
        REPEAT: 'form'
      }
    }
  }
})
export const useFormStateMachine = function() {
  const current = ref(myMachine.initialState)
  const service = interpret(myMachine)
  service
    .onTransition(state => {
      current.value = state
    })
    .start()
  const send = (event: FormEvent) => {
    service.send(event)
  }
  return { current, send }
}

form.vue

<template>
  <button @click="submitPressed" />
  form - {{ current.matches('form') }}<br />
  formInvalid - {{ current.matches('formInvalid') }}<br />
  submitting - {{ current.matches('submitting') }}<br />
  successInfo - {{ current.matches('successInfo') }}<br />
  failInfo - {{ current.matches('failInfo') }}<br />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useFormStateMachine } from '@/modules/useFormStateMachine'

export default defineComponent({
  setup() {
    const { current, send } = useFormStateMachine()
    const submitPressed = () => {
      send('SUBMIT')
    }
    return { submitPressed, current }
  }
})
</script>

All compiles and runs fine. I am using Vue-cli npm run serve. After 'submit' is pressed Machin changes state to 'submitting' and all looks fine. But after several seconds of no activity error appears -

Argument of type '"SUBMIT"' is not assignable to parameter of type 'FormEvent'.
136 | const submitPressed = () => {
137 | model.value.$touch()

138 | send('SUBMIT')

What I am doing wrong?

My config:
"dependencies": {
"@types/vuelidate": "^0.7.13",
"@vuelidate/core": "^2.0.0-alpha.8",
"@vuelidate/validators": "^2.0.0-alpha.5",
"axios": "^0.21.0",
"vue": "^3.0.4",
"vue-i18n": "^9.0.0-beta.12",
"vue-router": "^4.0.1",
"vuex": "^4.0.0-rc.2",
"xstate": "^4.15.1"
},

P.S Error arrives even I did not press button. In the beginning all compiles and run, and after several second - UPS - TS error.

[RollingTL]

It was so easy to solve:
instead of
send('SUBMIT')
one should use
send({ type: 'SUBMIT' }).

I am TypeScript nub and the idea arrived too late. Anyway I hope this self-discussion will be helpful.