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 

};

export const Template = (args) => {
  //👇 Assigns the function result to a variable
  const functionResult = someFunction(args.propertyA, args.propertyB);
  return {
    components: { YourComponent },
    setup() {
      //👇 The args will now be passed down to the template
      return {
        args: {
          ...args,
          //👇 Replaces arg variable with the override (without the need of mutation)
          someProperty: functionResult,
        },
      };
    },
    template:  '<YourComponent :propertyA="propertyA" :propertyB="propertyB" :someProperty="someProperty"/>',
  };
};

<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',
    }}>
    {Template.bind({})}
  </Story>
</Canvas>
```