storybook/docs/snippets/vue/my-component-play-function-with-selectevent.mdx.mdx

```md
<!-- MyComponent.stories.mdx -->

import { Meta, Story } from '@storybook/addon-docs';

<!-- These are placeholders until the addon-interaction is out -->

import userEvent from '@testing-library/user-event';
import { screen, fireEvent } from '@testing-library/vue';

import MyComponent from './MyComponent.vue';

<Meta title="ExampleChangeEvent" component={MyComponent} />

<!-- This is a placeholder mocked sleep function to be updated once the addon-interactions is out. -->

export const sleep= (ms) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

<!--  Queries the element by it's role and fires the event -->

<Story 
  name="ExampleChangeEvent"
  play={async () => {
    const dropdown = screen.getByRole('listbox');

    await fireEvent.change(dropdown, { target: { value: 'One Item'} });
    await sleep(2000);

    await fireEvent.change(dropdown, { target: { value: 'Another Item' } });
    await sleep(2000);

    await fireEvent.change(dropdown, {
      target: { value: 'Yet another item' },
    });
  }}
  render={() => ({
    components: { MyComponent },
    template: '<MyComponent/>',
  })} />
```