this.context is null when open dragable in vue bootstrap modal window

[kapdom]

I have problem with draggable in vue bootstrap modal window.

When first time open a modal window with dragable then everything works fine. But when I close it and open again then error appears "Uncaught TypeError: this.context is null" and app crash.

package.json:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "laravel-mix": "^6.0.49",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^4.0.0",
        "sass": "^1.23.3",
        "sass-loader": "^8.0.0",
        "vue": "^2.7.16",
        "vue-loader": "^15.9.7",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "@googlemaps/markerclusterer": "^2.5.1",
        "@popperjs/core": "^2.11.8",
        "autoprefixer": "^10.4.12",
        "axios": "^1.7.7",
        "bootstrap-vue": "^2.23.1",
        "css-loader": "^6.3.0",
        "font-awesome": "^4.7.0",
        "moment": "^2.29.4",
        "vee-validate": "3",
        "vue-axios": "^3.5.2",
        "vue-draggable-plus": "^0.5.3",
        "vue-fragment": "^1.6.0",
        "vue-froala-wysiwyg": "^4.1.2",
        "vue-js-toggle-button": "^1.3.3",
        "vue-multiselect": "^2.1.9",
        "vue-toast-notification": "^1",
        "vue2-datepicker": "^3.11.1",
        "vuedraggable": "^2.24.3",
        "webpack": "^5.55.1"
    }
}

js file:

import Vue from 'vue';

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import CarsCompare from "./Modules/Cars/CarsCompare.vue";

Vue.use(BootstrapVue);
Vue.use(IconsPlugin);

const element = document.getElementById('cars-compare-section');

if (element) {
    new Vue({
        render: h => h(CarsCompare)
    }).$mount('#cars-compare-section');
}

Vue file:

<template>
    <article class="car-compare">
        <a
            class="btn btn-secondary btn-gray rounded custom-filter"
            @click="openCustomParamsModal"
        >
            <span>Zarządzaj danymi</span>
            <i class="filter-icon"></i>
        </a>
        <b-modal id="custom-settings-modal" title="Własne parametry" size="lg" scrollable centered>

            <draggable
                v-model="test"
                class="list-group border-bottom mb-2"
                v-bind="dragOptions"
                @start="drag = true"
                @end="drag = false"

            >
                <transition-group type="transition" :name="!drag ? 'flip-list' : null">
                    <b-col v-for="(item, index) in test" v-bind:key="item.car_id" cols="12" sm="auto" class="float-left">
                        <div class="draggable-item row">
                            <div class="col-auto d-flex ps-0">
                                <i class="drag-icon"></i>
                            </div>
                        </div>
                    </b-col>
                </transition-group>
            </draggable>

        </b-modal>
    </article>

</template>

<script>


import draggable from 'vuedraggable';

export default {
    name: "CarCompare",
    components: {
        draggable

    },
    data() {
        return {
            test: [
                {
                    car_id: 1,
                    car_main_name: 'test',
                    power: 100,
                    weight: 1000,
                },
                {
                    car_id: 2,
                    car_main_name: 'test2',
                    power: 200,
                    weight: 1000,
                }
            ],
            drag: false,
        }
    },
    computed: {
        dragOptions() {
            return {
                animation: 200,
                group: "description",
                disabled: false,
                ghostClass: "ghost"
            };
        },
    },
    methods: {
        openCustomParamsModal() {
            this.$bvModal.show('custom-settings-modal');
        },
    },
}
</script>

<style lang="scss">
.draggable-item {
    cursor: pointer;
    border: solid thin var(--grayDarkSolid);
    padding: 15px;
    margin-bottom: 15px;
}
.ghost {
    opacity: 0.5;
    background: #c8ebfb;
}
.button {
    margin-top: 35px;
}

.flip-list-move {
    transition: transform 0.5s;
}

.no-move {
    transition: transform 0s;
}

.ghost {
    opacity: 0.5;
    background: #c8ebfb;
}

.list-group {
    min-height: 20px;
}

.list-group-item {
    cursor: move;
}

.list-group-item i {
    cursor: pointer;
}
</style>

[dtom90]

I was able to work around this by not rendering the draggable if modal is not shown

dtom90/DevTrack@7595765#diff-d73bd81b4139e5eea8ccaf06728cfc772e2f32a327d43178d6d19cdbe42866dc