Cannot read property 'update:tags' of undefined

[saadabdurrazaq]

As soon as I install this package I got this error Cannot read property 'update:tags' of undefined

[VerstovDI]

Is there any updates on it? Has the same issue. Use Vue.js (v.3), install this package, create new component, insert all code from the example and got this. Please, clarify, why it is happening! Thank you in advance!

[keatonconrad]

Any update on this? Looking to use this for vue3

[NinoLeon]

Seems like there are no Updates yet. Still same Problem

[LucasNLage]

Commenting to follow. I am also running into this issue

[LucasNLage]

Has anyone found a solution to this yet?

[tse-lao]

same issue, is there something else available?

[Derinsola16]

This issue has been open since 2021 and no one has dropped feedback.

[juanhuerta]

Any update?

[jewells77]

We need this to be fixed ASAP

[harveysanders]

I don't know much about Vue, but this is what I've found if helpful.
I believe the issue stems from vue-tags-input's dependence on a 'private' property _events.

vue-tags-input/vue-tags-input/vue-tags-input.js

Line 355 in 294026a

if (this._events['update:tags'] && !this.tagsEqual()) {

Looking at the Vue source, it looks like this _events property is attached to the component instance here:
https://github.com/vuejs/vue/blob/49b6bd4264c25ea41408f066a1835f38bf6fe9f1/src/core/instance/init.ts#L60
The only call to initEvents I could find in my brief search was in initMixins, but the way I'm attempting to instantiate my component, initMixins is never called:

tags-input.js

const app = createApp({
    data() {
        return {
            tag: "",
            tags: [],
        };
    },
});

app.component("VueTagsInput", VueTagsInput);
app.mount("#my-app");

another-file.html

<div id="my-app">  
    <vue-tags-input v-model="tag"
        :tags="tags"
        @tags-changed="newTags => tags = newTags" />
</div>

If this lib is working for other people, I bet it's due to how they're registering the VueTagsInput component. In my app, I don't have a build system setup, so I thought I'd need to register the component this way.
I haven't found a solution yet, but maybe that helps someone.

Also there's this about global mixins on the Vue doc:

"Not Recommended

Mixins are supported in Vue 3 mainly for backwards compatibility, due to their widespread use in ecosystem libraries. Use of mixins, especially global mixins, should be avoided in application code.

For logic reuse, prefer Composables instead.

https://vuejs.org/api/application.html#app-mixin

[moqmar]

As I just now stumbled upon this issue: there's now https://www.npmjs.com/package/@sipec/vue3-tags-input as a drop-in replacement that works with Vue 3.

[samthatcode]

As I just now stumbled upon this issue: there's now https://www.npmjs.com/package/@sipec/vue3-tags-input as a drop-in replacement that works with Vue 3.

Yes thank you and this works good. for those who will probably face same error even when using this library, the doc says to import this: import VueTagsInput from '@johmun/vue-tags-input'; but you have to change that to import VueTagsInput from "@sipec/vue3-tags-input";
and you are good to go. Works for vue3. Happy coding