patrickelectric/elefante.vue

## elefante.vue
<template>
  <span class="example">{{ msg }} - {{ potatoFunction() }}</span>
</template>
<script>
  export default {
    data () {
      return {
        msg: 'elefante!',
        color: 'red',
      }
    }
  }
</script>

<style scoped>
  .example {
    color: v-bind('color');
  }
</style>

## index.html
<html>

<body>
    <div id="app">
        <div v-for="potato in potatoes">
            <div>
                <h3>Potato: {{ potato }} - {{potatoFunction()}}</h3>
            </div>
        </div>
        <div>
            <input v-model="widgetsList" placeholder="potato.vue" />
        </div>
<div v-for="url in widgetsList.split(',')">
    <widget v-bind:url="url" />
</div>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"></script>
    <script>
        const options = {
            moduleCache: {
                vue: Vue
            },
            async getFile(url) {

                const res = await fetch(url);
                if ( !res.ok )
                throw Object.assign(new Error(res.statusText + ' ' + url), { res });
                return await res.text();
            },
            addStyle(textContent) {

                const style = Object.assign(document.createElement('style'), { textContent });
                const ref = document.head.getElementsByTagName('style')[0] || null;
                document.head.insertBefore(style, ref);
            },
        }
        const { loadModule } = window['vue3-sfc-loader'];

        const app = Vue.createApp({
            mounted: function () {},
            methods: {},
            data: function() {
                return {
                    "potatoes": ["chips", "fried"],
                    "widgetsList": "potato.vue"
                }
            },
        })

        app.component("widget", {
            props: {
                url: {
                    type: String,
                    required: true
                },
            },
            computed: {
                computedComponent() {
                    const currentComponent = this.url;
                    return Vue.defineAsyncComponent( () => loadModule(currentComponent, options) );
                }
            },
            data() {
                return {
                    currentComponent: './potato.vue',
                }
            },
            template: `<component :is="computedComponent"></component>`
        })

        app.mixin({
            methods: {
                potatoFunction: function() {
                    return "external potato!!"
                },
            },
        });

        app.mount("#app")
    </script>
</body>

</html>

## potato.vue
<template>
  <span class="example">{{ msg }} - {{ potatoFunction() }}</span>
</template>
<script>
  export default {
    data () {
      return {
        msg: 'potato!',
        color: 'blue',
      }
    }
  }
</script>

<style scoped>
  .example {
    color: v-bind('color');
  }
</style>
	<template>
	<span class="example">{{ msg }} - {{ potatoFunction() }}</span>
	</template>
	<script>
	export default {
	data () {
	return {
	msg: 'elefante!',
	color: 'red',
	}
	}
	}
	</script>

	<style scoped>
	.example {
	color: v-bind('color');
	}
	</style>
	<html>

	<body>
	<div id="app">
	<div v-for="potato in potatoes">
	<div>
	<h3>Potato: {{ potato }} - {{potatoFunction()}}</h3>
	</div>
	</div>
	<div>
	<input v-model="widgetsList" placeholder="potato.vue" />
	</div>
	<div v-for="url in widgetsList.split(',')">
	<widget v-bind:url="url" />
	</div>
	</div>
	<script src="https://unpkg.com/vue@next"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"></script>
	<script>
	const options = {
	moduleCache: {
	vue: Vue
	},
	async getFile(url) {

	const res = await fetch(url);
	if ( !res.ok )
	throw Object.assign(new Error(res.statusText + ' ' + url), { res });
	return await res.text();
	},
	addStyle(textContent) {

	const style = Object.assign(document.createElement('style'), { textContent });
	const ref = document.head.getElementsByTagName('style')[0] \|\| null;
	document.head.insertBefore(style, ref);
	},
	}
	const { loadModule } = window['vue3-sfc-loader'];

	const app = Vue.createApp({
	mounted: function () {},
	methods: {},
	data: function() {
	return {
	"potatoes": ["chips", "fried"],
	"widgetsList": "potato.vue"
	}
	},
	})

	app.component("widget", {
	props: {
	url: {
	type: String,
	required: true
	},
	},
	computed: {
	computedComponent() {
	const currentComponent = this.url;
	return Vue.defineAsyncComponent( () => loadModule(currentComponent, options) );
	}
	},
	data() {
	return {
	currentComponent: './potato.vue',
	}
	},
	template: `<component :is="computedComponent"></component>`
	})

	app.mixin({
	methods: {
	potatoFunction: function() {
	return "external potato!!"
	},
	},
	});

	app.mount("#app")
	</script>
	</body>

	</html>