hunk.code_window: import { shallowRef, onMounted, Ref } from 'vue';
   import {
     EventObject,
     StateMachine,
  
hunk.labels: replace keep keep keep
hunk.after_edit: import { shallowRef, Ref } from 'vue';
  
hunk.file_path: packages/xstate-vue/src/useMachine.ts
hunk.type: replace
file: <template>
    <button @click="service?.send('TOGGLE')" data-testid="button">
      {{ state === 'inactive' ? 'Turn on' : 'Turn off' }}
    </button>
  </template>
  
  <script lang="ts">
  import { useInterpret } from '../src';
  import { createMachine } from 'xstate';
  
  import { defineComponent, ref } from 'vue';
  const machine = createMachine({
    initial: 'inactive',
    states: {
      inactive: {
        on: {
          TOGGLE: 'active'
        }
      },
      active: {
        on: {
          TOGGLE: 'inactive'
        }
      }
    }
  });
  
  export default defineComponent({
    setup() {
      const state = ref();
      const service = useInterpret(machine, {}, (nextState) => {
        state.value = nextState.value;
      });
  
      return { service, state };
    }
  });
  </script>
  