storybook/docs/snippets/vue/form-story-component-with-play-function.2.js.mdx

```js
// Form.stories.js | Form.stories.jsx | Form.stories.ts | Form.stories.tsx

import userEvent, { expect, screen } from '@storybook/addon-interactions';

import { LoginForm } from './LoginForm';

export default {
  component: LoginForm,
  //👇 Marking the onSubmit with this configuration will log the event in the Actions panel
  argTypes: { onSubmit: { action: true } },
};

export const FilledForm = {
  play: async ({ args }) => {
    await userEvent.type(screen.getByTestId('email'), 'email', {
      delay: 100,
    });
    await userEvent.type(screen.getByTestId('password'), 'password', {
      delay: 100,
    });
    await userEvent.click(screen.getByTestId('submit'));
    await expect(args.onSubmit).toHaveBeenCalled();
  },
  render: (args, { argTypes }) => ({
    components: { LoginForm },
    props: Object.keys(argTypes),
    template: '<LoginForm @onSubmit="onSubmit" v-bind="$props"/>',
  }),
};
```