Version

3.0.7

Reproduction link

https://github.com/dannysmc95/vue-bug-1

Steps to reproduce

1. Clone the repo.
2. Go to each folder inside the repo and run npm install.
3. Go to the rewyre-ui folder, do: npm run build.
4. Now in the hello-app folder do npm run serve and then open it in the browser.
5. Go to the about page, you will see there is an input and some text.
6. Type in the input, why is this not reactively changing the text with the input, and why is the input blank?

Also the composition version I have played around with and this also doesn't work, using both: ref, reactive and the data().

What is expected?

The input would be filled with the content, and I can type and it will reactively update.

What is actually happening?

Empty input field, that does not change, and throws the following errors:

runtime-core.esm-bundler.js?7a9e:38 [Vue warn]: withDirectives can only be used inside render functions.

I mean, this could be not even a Vue related issue, but I can't understand why both the class component and composition API both do not work to make a reactive component when imported to another project.

Is there something I am missing? Or something that I do not understand?

To add for context, I want to make a component library for our company to help ease the transition from Vue 2 to Vue 3, and I wanted to merge all our custom components into a single library with more company related UI components so that as a company we all use the same place.

But for some reason, I can't get anything to work, to note, most of the repository is copied from the Equal library, as I tried to do it myself, but I could not even get it to import and show a component, since using Vite, it builds and somewhat works based on the noted library, but this is the strange behaviour I am now getting.

Any suggestions or help is appreciated, feel free to push to the repo with fixes as well, but I would also really like to understand more about why this does not work, do imported libraries not work?

To confirm, I want to use the vue-class-component it's similar to other code we have, and feels more natural, although I do not mind using the composition API if we HAVE to. We will always use TypeScript, but I would quite like it so that it can be used and installed in the browser alongside using with Vite/Webpack - I am hoping what I have so far will work for those.

Add this to hello-app/vue.config.js, see https://github.com/vuejs/vue-next/issues/1503 for details

config.resolve.alias.set('vue$', resolve(__dirname, 'node_modules/vue'))

@HcySunYang Thank you, really appreciate it, I have been stuck for a week now trying to figure out why it wasn't working.