Как сделать декоратор компонента vue?

Question

vitaly_74 @vitaly_74

Vue.js

Как сделать декоратор компонента vue?

сейчас есть компонент mapbox и он прекрасно работает

<mapbox
      access-token="your access token"
      :map-options="{
        style: 'mapbox://styles/mapbox/light-v9',
        center: [-96, 37.8],
        zoom: 3,
      }"
      :geolocate-control="{
        show: true,
        position: 'top-left',
      }"
      @map-load="loaded"
      @map-zoomend="zoomend"
      @map-click:points="clicked"
      @geolocate-error="geolocateError"
      @geolocate-geolocate="geolocate"
    />

теперь я хочу добавить сюда возможность рисования полигонов, и добавляю компонент MapBoxDraw
вот мой main.js

import Vue from 'vue'
import VueApexCharts from 'vue-apexcharts'
import Mapbox from 'mapbox-gl-vue'
import MapBoxDraw from 'mapbox-gl-draw'

window.Vue = Vue;
window.Vue.component('apex-charts', VueApexCharts);
window.Vue.component('map-box', Mapbox);
window.Vue.component('map-box-draw', MapBoxDraw);

я это все запускаю через виджеты php и вставляю на сайт в виде конфигураций. например вот как это выглядит для MapBox

<?= VueWidget::widget([
    'component'=>'map-box',
    'property'=>[
        'style'=>[
            'height'=> "500px"
        ],
       'access-token'=>'',
       ":map-options"=>[
           "style"=>'mapbox://styles/vitaly2litvino/cknpuyit02f8g17o1r9mnqra8',
           'center'=>[-68.137343, 45.137451],
           'zoom'=>10
       ],
        ':fullscreen-control'=>[
            "show"=>false,
            'position'=> 'top-left'
        ],
        "@map-init"=>"loaded" //вот это меня не устраивает
    ]
])?>

в данном случае чтобы добавить рисование полигона я должен в пхп вставить js метод loaded - что не очень хорошо, я думаю не удобно, и в нем конфигурировать MapBoxDraw.
Мне бы хотелось создать vue компонент MapBoxWithDraw
который будет точно также инициализироваться как и MapBox только с дополнительным проперти.
например :draw=>[]....
а в самом компоненте уже описать необходимые методы, и передавать данные в MapBoxDraw. (На будущее я туда еще и из пхп буду данные передавать).

<script>
    import Mapbox from 'mapbox-gl-vue'
    import MapBoxDraw from 'mapbox-gl-draw'

    export default {
        components: { Mapbox },
        props: {
            "map-options": {
                "style": "mapbox://styles/vitaly2litvino/cknpuyit02f8g17o1r9mnqra8"
            },

        },
        methods: {
            initialized(map) {
                const Draw = new MapBoxDraw();
                map.addControl(Draw)
            },
        },
    }
</script>

Вопрос в том как реализовать такой паттерн декоратор, попробовал сделать так но не получается.

Подскажите пожалуйста как это реализовать?