VueJs Multiple Instances of Uppload

[buzzclue]

Describe the bug Using Uppload v2.x with VueJs 2.7.x and my vue component looks like this:

<template>
    <div @click="open">
        <slot />
    </div>
</template>

<script>
    import { Uppload, en } from "uppload";
    import { Preview, Crop, Brightness, Grayscale, Sepia, Rotate, Blur, Flip } from "uppload";
    import { Screenshot, Local, URL, Unsplash, GIPHY, Pexels, Pixabay } from "uppload";

    export default {
        name: "MediaSelect",
        props: {
            mimes: {
                type: Array,
                default: function () {
                    return [
                        "image/gif",
                        "image/jpeg",
                        "image/jpg",
                        "image/png",
                    ]
                }
            },
            multiple: {
                type: Boolean,
                default: false
            },
            show: {
                type: Boolean,
                default: false
            },
            maxFileSize: {
                type: Number,
                default: function () {
                    return this.$variables.max_size ? this.$variables.max_size : 25000
                }
            },
            uploader: Function
        },
        created() {
            if (!this.uppload) {
                this.uppload = new Uppload({
                    lang: en,
                    uploader: this.uploader,
                    showHelp: true,
                    multiple: this.multiple,
                    maxFileSize: this.maxFileSize,
                    defaultService: 'local',
                    transitionDuration: 1,
                    compression: 0.8,
                    compressionFromMimes: ["image/jpeg", "image/png", "image/webp"],
                    compressionToMime: "image/webp"
                });

                let services = [];
                services.push(new Crop())
                services.push(new Flip())
                services.push(new Brightness())
                services.push(new Grayscale())
                services.push(new Sepia())
                services.push(new Rotate())
                services.push(new Blur())
                services.push(new Preview())

                services.push(new Local({
                    mimeTypes: this.mimes
                }))
                services.push(new URL())
                services.push(new Screenshot())
                services.push(
                    new GIPHY(this.$variables.giphy_access_key)
                )

                this.uppload.use(services);
                this.uppload.on("upload", url => this.$emit("input", url))
                this.uppload.on("close", () => this.$emit("close"))
                this.uppload.on("open", () => this.$emit("open"))
            }
        },
        methods: {
            open() {
                this.uppload.open();
            },  
        },
    }
</script>

To Reproduce Steps to reproduce the behavior: When multiple instances of this component are created then the services navigation work on the first one initialized but won't work others.

Expected behavior Navigation should work on every instance.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Firefox, Chrome
• Version Latest versions

[buzzclue]

PR #863 will resolve the issue.

[AnandChowdhary]

Amazing, thanks so much!