Vue2 to Vue3, Working with Inputs and v-model

[thesheppard]

In Vue2, Storybook's controls don't trigger the required events for v-model and the controlled value can't be updated by the component. Instead, put the value in the root instance's data() and disable controls for it.
i.e

import MyInput from '../src/components/MyInput.vue'

export default {
  title: 'Components/MyInput',
  component: MyInput,
  argTypes: {
    value: {
      table: { disable: true },
    },
  },
}

const Template = (args, { argTypes }) => ({
  // This is what I'm referring to specifically
  props: Object.keys(argTypes).filter((x) => x !== 'value'),
  data() {
    return { value: '' }
  },
  components: { MyInput },
  template: `<MyInput v-bind="$props" v-model="value" />`,
})

export const Primary = Template.bind({})

So now how would argTypes work since the way we write the Template has changed. i.e

const Template = (args ) => ({
  setup() {
    return { args }
  },
  components: { MyInput },
  template: `<MyInput v-bind="$props" v-model="value" />`,
})

[Juice10]

I got something similar to work following this blogpost: https://craigbaldwin.com/blog/updating-args-storybook-vue/