[Bug]: Storybook 7 breaks localization implementation with vue-i18n

[MargaritaBusyginaCa]

Describe the bug

Hello, we are using vue-i18n and @vee-validate/i18n in our project for changing locale from ENG to FR. It worked perfectly for storybook 6.5, but when we updated to storybook version 7, changing locale no longer works unless the story gets reloaded (on browser window reload, not story within storybook). There are no warnings or errors in the console, and I believe the issue is coming from storybook 7.

To Reproduce

No response

System

No response

Additional context

No response

[shilman]

Do you a have a reproduction repo you can share? If not, can you create one? Go to https://storybook.new or see repro docs. Thank you! 🙏

[MargaritaBusyginaCa]

@shilman Yes, I have a repo that you can check to reproduce a bug: https://github.com/MargaritaBusyginaCa/sb7-locale-bug

after you clone the repo and run npm install, please run storybook with npm run storybook and go to Primary Button story. If you click the button, you will see that the language changes only once. But if you refresh the page and start clicking the button again, the localization changes as expected from english to Spanish every time the button is clicked. That's the bug of storybook7 + vue-i18n. I didn't have this problem with storybook 6

[MargaritaBusyginaCa]

@shilman I also created a screen recording of the current behaviour of storybook 7 + vue-i18n

https://github.com/storybookjs/storybook/assets/74435192/e3abd937-ffd0-43ee-b734-a7de0561f579

[shilman]

cc @kasperpeulen @chakAs3

[chakAs3]

Hi, @MargaritaBusyginaCa I opened a PR on your repo to fix that, that were some issues with dependencies I cleaned. up deprecated ones, but this has nothing to do with the issue

[MargaritaBusyginaCa]

Hello @chakAs3, thank you for your contribution. I noticed you added app.use(createI18n(i18n)); I haven't seen this syntax in vue-i18n documentation before, so thanks for showing it to me. However, this new syntax changes the i18n object that gets returned. I wonder if there is a way to keep the i18n object as it is? (I attached screenshots of console.log(i18n) output in console)

[chakAs3]

from your screenshot, I think you should set legacy to true.

by the way, I did not change the syntax, I used your exact code, the difference I'm creating an instance for each story. but I upgraded the plugin