Repository: storybook
Issue: Vue 3 app is reused, therefore plugins can't be re-initialized
Labels: bug,vue3

**Describe the bug**
Writing stories involving Vue 3 plugins is made difficult by the reusing of the underlying app instance between stories. A typical usecase is to mock the vuex store and the router for each story.
Using `app` from `@storybook/vue3` works the first time a story is loaded, then an error occurs the next time:

```
can't redefine non-configurable property "$route"
```

![image](https://user-images.githubusercontent.com/2798204/168282317-353a2a25-1b08-4881-9ae5-ece218c7ef6d.png)

Besides the error, the new plugins aren't being registered because they are not supposed to in Vue 3.

**To Reproduce**
https://github.com/Akryum/storybook-issue-app-use/blob/main/src/stories/IssueStory.stories.js

**System**

```
Environment Info:

  System:
    OS: Linux 5.17 Fedora Linux 36 (Workstation Edition)
    CPU: (24) x64 AMD Ryzen 9 3900XT 12-Core Processor
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 3.2.1 - ~/.nvm/versions/node/v16.14.0/bin/yarn
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Firefox: 100.0
  npmPackages:
    @storybook/addon-actions: ^6.5.0-beta.8 => 6.5.0-beta.8 
    @storybook/addon-docs: ^6.5.0-beta.8 => 6.5.0-beta.8 
    @storybook/addon-essentials: ^6.5.0-beta.8 => 6.5.0-beta.8 
    @storybook/addon-interactions: ^6.5.0-beta.8 => 6.5.0-beta.8 
    @storybook/addon-links: ^6.5.0-beta.8 => 6.5.0-beta.8 
    @storybook/builder-webpack5: ^6.5.0-beta.8 => 6.5.0-beta.8 
    @storybook/manager-webpack5: ^6.5.0-beta.8 => 6.5.0-beta.8 
    @storybook/testing-library: ^0.0.11 => 0.0.11 
    @storybook/vue3: ^6.5.0-beta.8 => 6.5.0-beta.8 
```

**Additional context**

I believe there is a fundamental issue in the logic of `@storybook/vue3`: reusing the app instance.

Instead of doing this:

```js
import { app } from '@storybook/vue3'
import { createStore } from 'vuex'
import { createRouter, createMemoryHistory } from 'vue-router'

import IssueStory from './IssueStory.vue'

export default {
  title: 'IssueStory',
  component: IssueStory,
}

const Template = (args) => {
  // Mock store
  app.use(createStore({
    state: () => ({
      foo: 'bar',
    }),
  }))
  // Mock router
  app.use(createRouter({
    history: createMemoryHistory(),
    routes: [
      { path: '/', name: 'mock', component: { render: () => null } },
    ],
  }))
  return {
    components: { IssueStory },
    setup: () => ({ args }),
    template: '<IssueStory v-bind="args"/>',
  }
}

export const Example = Template.bind({})
```

A better API to work around this issue would be:

```js
import { createStore } from 'vuex'
import { createRouter, createMemoryHistory } from 'vue-router'

import IssueStory from './IssueStory.vue'

export default {
  title: 'IssueStory',
  component: IssueStory,
}

const Template = (args, { app }) => {
  // Mock store
  app.use(createStore({
    state: () => ({
      foo: 'bar',
    }),
  }))
  // Mock router
  app.use(createRouter({
    history: createMemoryHistory(),
    routes: [
      { path: '/', name: 'mock', component: { render: () => null } },
    ],
  }))
  return {
    components: { IssueStory },
    setup: () => ({ args }),
    template: '<IssueStory v-bind="args"/>',
  }
}

export const Example = Template.bind({})
```

Notice how app is specific to each story here.

There should also be a way to apply plugins and interact with the current app instance in `preview.js`:

```js
import { onAppCreated } from '@storybook/vue3'

onAppCreated(app => {
  app.use(VueI18n)
  app.component('BaseButton', BaseButton)
})
```