hunk.code_window: <template>
     <div data-testid="actor-state">
       {{ actorState.value }}
     </div>
  
hunk.labels: keep replace replace keep
hunk.after_edit:   <div>
       <div data-testid="actor-state">
         {{ actorState.value }}
       </div>
       <button @click="actorSend({ type: 'FINISH' })"></button>
  
hunk.file_path: packages/xstate-vue/test/UseActorComponentProp.vue
hunk.type: replace
file: <template>
    <div data-testid="state">{{ state }}</div>
    <button data-testid="button" @click="actor = createSimpleActor(100)"></button>
  </template>
  
  <script lang="ts">
  import { ActorRef } from 'xstate';
  import { defineComponent, shallowRef } from 'vue';
  
  import { useActor } from '../src';
  
  const createSimpleActor = (
    value: number
  ): ActorRef<any, number> & { latestValue: number } => ({
    send: () => {
      /* ... */
    },
    latestValue: value,
    subscribe: () => {
      return {
        unsubscribe: () => {
          /* ... */
        }
      };
    }
  });
  
  export default defineComponent({
    setup() {
      const actor = shallowRef(createSimpleActor(42));
      const { state } = useActor(actor, (a) => a.latestValue);
  
      return { actor, state, createSimpleActor };
    }
  });
  </script>
  