Version

3.2.21

Reproduction link

github.com

Steps to reproduce

1. Clone the git repo.

This steps is to build a vue components library.

2. Open a terminal in vscode / others.
3. cd component-library/
4. npm i
5. npm run build (Build the components library using vite)
6. npm run dev (This command is to run a test on the components in this package)
7. Open browser in port http://localhost:3000/ and test the buttons.

This steps is to test the components library in another vue app.

8. Open another terminal
9. cd vite-app/
10. npm i
11. npm run dev
12. Open browser in port http://localhost:3001/ and test the buttons.

What is expected?

http://localhost:3001/ can perform same result as http://localhost:3000/

What is actually happening?

Can refer to http://localhost:3001/.

1. "click" button is missing.
2. "click2" button click will no direct affect the UI like http://localhost:3000/
3. "click3" button function well as http://localhost:3000/

I am new to the vue3 and vite. I wish to create a components library with vue 3 composition API. Then, I meet this bug while creating the component library using vite. Then I create a sample to test the bug.

There are 3 kinds of reactive variables I used.

1. The first button "Click" that change reactive variable "Composition Api from outside TS file" I use composition API ref() which import in setup() from outside file. Can refer to "component-library/src/component/Component1.vue, Component2.vue, share.ts".
2. The second button "Click 2" that change reactive variable "Composition Api from inner setup" I use composition API ref() and declare inside setup(). Can refer to "component-library/src/component/Component1.vue".
3. The third button "Click 3" that change reactive variable "Optional APi" I use optional API data(). Can refer to "component-library/src/component/Component1.vue".

After that, I use vite to build a component library based on the documentation https://vitejs.dev/guide/build.html#library-mode.

After built the library, I create a new vite app to test the library. I import the components from "component-library" and run the app.

The result I expected is the "vite-app" which use the components from "component-library" can perform the same result with the "component-library" in "npm run dev".

This means that the reactive variables from composition API is work when import from components library.

I am not sure this bug is come from vue or vite, or I am using wrong methods to build components library. I hope can get some advices from the community, thank you.

Duplicate of https://github.com/vuejs/vue-next/issues/1503