Story control pattern that works in Vue 2.7 and Vue 3

[thedamon]

Problem Currently the way you pass args into stories is different between Vue 2 and Vue 3, and since the release of Vue 2.7, which backports the composition API, "Vue 3 way" looks exactly like it should work in Vue 2, but it doesn't.

By not working I mean that in both cases the controls do not have an effect unless the story is reloaded.

This is limiting when it comes to upgrading a library from Vue 2 to Vue 3, as not only do two branches/versions of the source code need to be maintained, you then have to decide if you write entirely new stories, change to the new way and sacrifice controls working for Vue 2, or also keep the story changes in sync with frequent conflict resolution.

Vue 2 way (doesn't work in Vue 3 even though there's no reason from a framework point of view that it wouldn't):

const Template = (args, { argTypes }) => ({
  components: { Page },
  props: Object.keys(argTypes),
  template: '<page v-bind="$props" />',
});

Vue 3 way (doesn't work in Vue 2.7 even though there's no reason from a framework point of view that it wouldn't):

const Template = (args) => ({
  components: { Page },
  setup() {
    return { args };
  },
  template: '<page v-bind="args" />',
});

Solution A way to use the vue 3 story component logic within a storybook using vue 2.7, or a plugin that enables the same somehow. I understand the underlying Story logic is totally rewritten for Vue 3 according to newer standards, so I assume it would be much easier to backport that then get into the Vue 2 code itself.

Alternatives Alternative is figuring out a weird different way that works for both and makes our storybook overall much harder to maintain and out of sync with the recommendations in the docs, or maybe not using storybook anymore, as it presents to much maintenance overhead for something kinda meant to do the opposite.

Are you able to assist to bring the feature to reality? Possibly if someone can provide guidance on the architecture of the current implementation.