Vue 3 Storybook - vue.js

Question

I have successfully installed Storybook for Vue, but it doesn't seem to handle Vue 3 components very well.
I believe this is because the Vue version is #vue/cli 4.5.11 when I run "vue -V" & the Storybook is 6.1.17 when I run "start-storybook -V"
I don't get how this works. Am I on Vue 3? How do I get Storybook to understand my Vue 3 components?
Here is my package.json file:
{
"name": "component-library",
"version": "0.1.0",
"private": true,
"description": "Component Library",
"repository": {
"type": "git",
"url": ""
},
"license": "MIT",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
},
"dependencies": {
"#storybook/theming": "^6.1.18",
"#vue/composition-api": "^1.0.0-rc.2",
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"devDependencies": {
"#babel/core": "^7.12.10",
"#storybook/addon-actions": "^6.1.11",
"#storybook/addon-essentials": "^6.1.11",
"#storybook/addon-links": "^6.1.11",
"#storybook/addons": "^6.1.18",
"#storybook/vue": "^6.1.11",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-unit-jest": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/test-utils": "^1.0.3",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^1.19.1",
"vue-template-compiler": "^2.6.11"
}
}

Answer 1

Right now, you are on Vue version 2.6.11, which isn't Vue 3.
You can easily upgrade your project with the Vue CLI command:
vue add vue-next
After that make sure to upgrade Storybook:
npx sb#next init
You can checkout the blog post by Storybook about the Vue 3 integration.