Typing reusable render function in Vue, storybook v7

[josip2312]

There is no example in the documentation on how to create a reusable render function with the CSF 3 syntax -> https://storybook.js.org/docs/vue/writing-stories/args

Example of what I mean:

const meta: Meta<typeof FieldAutocomplete> = {...}
export default meta;

type Story = StoryObj<typeof FieldAutocomplete>;

const render = (args) => ({
  components: { FieldAutocomplete },
  setup() {
    const searchTerm = ref();

    return { args, searchTerm };
  },
  template: `
    {{ searchTerm }}
    <FieldAutocomplete v-model="searchTerm" v-bind="args" />
    `,
});

export const Default: Story = {
  render,
};

export const WithLabel: Story = {
  render,

  args: {
    label: "Label here",
  },
};

If I do this I will get proper typing for the args, but not sure how to type the default render function args parameter

[TomDeSmet]

A very late answer here, but I had the exact same problem and what I did was add the render function to the Default story and in all my other stories use: { render: Default.render }.