Form Update statechart: https://xstate.js.org/viz/?gist=e143d0ff8755cf5069732cff247bb1e2

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const formMachine = Machine({
    initial: 'idle',
    context: {
      data: {
        name: '',
        age: '',
        address: '',
      },
      error: '',
    },
    states: {
      idle: {
        on: {
          fetch: 'fetching',
        },
      },
      fetching: {
        invoke: {
          id: 'fetchData',
          src: 'fetchData',
          onDone: {
            target: 'normal',
            actions: assign({
              // TODO: Can I directly set response to Vue date?
              data: (context, event) => event.data,
            }),
          },
          onError: {
            target: 'fetchFailed',
            actions: assign({
              error: (context, event) => event.data,
            }),
          },
        },
      },
      fetchFailed: {},
      normal: {
        on: {
          onSubmit: 'updating',
        },
      },
      updating: {
        invoke: {
          id: 'updateData',
          src: 'updateData',
          onDone: {
            target: 'normal',
          },
          onError: {
            target: 'updateFailed',
            actions: assign({
              error: (context, event) => event.data,
            }),
          },
        },
      },
      updateFailed: {
        on: {
          ok: 'normal',
        },
      },
    },
  });