add test story to stories to test reactive args

code/renderers/vue3/template/stories/ReactiveArgs.stories.js

@@ -0,0 +1,38 @@
+import { expect } from '@storybook/jest';
+import { global as globalThis } from '@storybook/global';
+import { within } from '@storybook/testing-library';
+import { UPDATE_STORY_ARGS } from '@storybook/core-events';
+import ReactiveArgs from './ReactiveArgs.vue';
+
+export default {
+  component: ReactiveArgs,
+  argTypes: {
+    // To show that other props are passed through
+    backgroundColor: { control: 'color' },
+  },
+};
+
+export const Reactive = {
+  args: {
+    label: 'Button',
+  },
+  // test that args are updated correctly in rective mode
+  play: async ({ canvasElement, id }) => {
+    const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
+    const canvas = within(canvasElement);
+    const reactiveButton = await canvas.getByRole('button');
+    reactiveButton.click(); // click to update the label to increment the count + 1
+    channel.emit(UPDATE_STORY_ARGS, {
+      storyId: id,
+      updatedArgs: { label: 'updated' },
+    });
+    expect(reactiveButton).toHaveTextContent('updated 1');
+    reactiveButton.click(); // click to update the label to increment the count + 1
+    expect(reactiveButton).toHaveTextContent('updated 2');
+    channel.emit(UPDATE_STORY_ARGS, {
+      storyId: id,
+      updatedArgs: { label: 'updated again' },
+    });
+    expect(reactiveButton).toHaveTextContent('updated again 3');
+  },
+};

code/renderers/vue3/template/stories/ReactiveArgs.vue

@@ -0,0 +1,41 @@
+<template>
+  <button type="button" :class="classes" :style="style">{{ label }} {{ counter }}</button>
+</template>
+
+<script lang="typescript">
+import { h, computed, reactive } from 'vue';
+
+export default {
+  name: 'reactive-args',
+
+  props: {
+    label: {
+      type: String,
+    },
+
+    backgroundColor: {
+      type: String
+    },
+  },
+
+  // @ts-expect-error (Converted from ts-ignore)
+  setup(props, { emit }) {
+    const classes = {
+      'storybook-button': true,
+      'storybook-button--primary': true,
+      'storybook-button--large': true,
+    };
+    const style = computed(() => ({
+      backgroundColor: props.backgroundColor,
+    }));
+    const counter = ref(0);
+    const onClick = () => {
+      emit('click', 1);
+      counter.value += 1;
+    };
+
+    // Notice that `icon` prop component is still passed through even though it isn't mapped
+    return { classes, style, counter }
+  },
+};
+</script>