Extensible architecture for Laravel and Vue JS components

I'm building a blog application, which had extensible feature in Laravel 5.5 with front end Vue JS 2.4, I'm having a folder structure something like this

Blog:
    Controllers
    Databases
    Models
    Routes
        web.php
        api.php
    Extensions
        Extension 1
            Models
            Controllers
            Databases
            Routes
                api.php
            Views
                Components
                    extension1.Vue
                Store
                app.js
            config.php
        Extension 2
            Models
            Controllers
            Databases
            Routes
                api.php
            Views
                Components
                    extension2.Vue
                Store
                app.js
            config.php
        Extension 3
            *
            *
            *
    Views
        home.blade.php
        Assets
            JS
                Components
                    Dashboard.Vue
                    Posts.Vue
                    Plugins.Vue
                Routes
                Store
                app.js
                bootstrap.js
            CSS

Basic core structure says, that I'm having a package of blog which has its own controllers, models, databases.. etc, In views folder I'm having a basic home.blade.php which is only used in rendering the app.js file compiled by webpack.mix.js while app.js file inside the views folder contains basic bootstrapping similar to Laravel's resources/assets/js/bootstrap.js, file links I'm loading basic components like dashboard section, posts section, plugins section etc. Now in dashboard section I want to having dynamic widgets which can be pulled from the extension folders but according to the user needs, I mean there can be a lot of extension out of which suppose end user opted to have 5-6 widgets to show on there dashboard, I want to load or render only those extension's components.

In short I want to import extension components dynamically. How can I achieve this, I've seen a article regarding async vue components where I can call components dynamically but not able to get how to implement this in architecture, I think there can be the basic steps to achieve this:

Lets take an example of weather widget

Step 1: Create a js file, destination Extensions/Views/weather.js which will hold the basic vue state instance of that particular plugin.

Step 2: Create a Vue component file, destination Extensions/Views/Components/weather.vue which holds the component instance.

Step 3: Asynchronously load the components through axios call in dashboard view.

I went through this forum discussion and came to point that this can be possible, only thing is we have to compile the component asynchronously. I mean we have to define the components in app.js file so I can make a list of all the widgets/extensions in a json file and push them as axios/ajax call to compile the components.

So my code looks like: https://gist.github.com/nitish1986/3ec9f71d0f58759b74b756551b2331fa

I'm not sure about my code, guide me how can I do the implementation.