storybook/docs/snippets/vue/component-story-custom-args-complex.mdx-3.mdx.mdx

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

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

import YourComponent from './YourComponent.vue';

<Meta title="YourComponent" component={YourComponent}/>

<!-- 👇 A function to apply some computations -->

export const someFunction = (valuePropertyA, valuePropertyB) => {

  // Makes some computations and returns something 

};

<!--
 👇 Render functions are a framework specific feature to allow you control on how the component renders.
  See https://storybook.js.org/docs/7.0/vue/api/csf
  to learn how to use render functions.
-->
<Canvas>
  <Story
    name="ExampleStory"
    argTypes={{
      propertyA: {
        options: [
          'Item One',
          'Item Two',
          'Item Three'
        ],
      },
      propertyB: {
        options: [
          'Another Item One',
          'Another Item Two',
          'Another Item Three'
        ],
      },
    }}
    args={{
      propertyA: 'Item One',
      propertyB: 'Another Item One',
    }}
    render={(args) => {
      const { propertyA, propertyB } = args;
      const functionResult = someFunction(propertyA, propertyB);
      return {
        components: { YourComponent },
        setup() {
          return {
            args: {
              ...args,
              someProperty: functionResult,
            },
          };
        },
        template: '<YourComponent v-bind="args" />',
      };
    }} />
</Canvas>
```