I'm trying to use https://vue-treeselect.js.org/ (multi-select component with nested options) in a Vue 3 single local HTML file (I don't want to use the Vue CLI for this specific task), using the standalone UMD build Vue 2, it works as it follows (as showed in the docs):
<html>
<head>
<!-- include Vue 2.x -->
<script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>
<!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
<script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css">
</head>
<body>
<div id="app">
<treeselect v-model="value" :multiple="true" :options="options" />
</div>
</body>
<script>
// register the component
Vue.component('treeselect', VueTreeselect.Treeselect)
new Vue({
el: '#app',
data: {
// define the default value
value: null,
// define options
options: [ {
id: 'a',
label: 'a',
children: [ {
id: 'aa',
label: 'aa',
}, {
id: 'ab',
label: 'ab',
} ],
}, {
id: 'b',
label: 'b',
}, {
id: 'c',
label: 'c',
} ],
},
})
</script>
</html>
How can I do the same using the UMD build for Vue 3?
I tried it switching the script line from Vue 2 to Vue 3, and adding the value and option variables inside data() like this (but does not recognize the new treeselect tag):
<html>
<head>
<!-- Vue 3 -->
<script src="https://unpkg.com/vue@next"></script>
<!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
<script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css">
</head>
<body>
<div id="app">
<treeselect v-model="value" :multiple="true" :options="options" />
</div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
value: null,
// define options
options: [{
id: 'a',
label: 'a',
children: [{
id: 'aa',
label: 'aa',
}, {
id: 'ab',
label: 'ab',
}],
}, {
id: 'b',
label: 'b',
}, {
id: 'c',
label: 'c',
}],
};
}
})
app.component('treeselect', VueTreeselect.Treeselect)
app.mount('#app')
</script>
</html>
question from:
https://stackoverflow.com/questions/65935680/how-do-i-use-a-vue-2-component-in-a-html-single-file-that-uses-vue-3-umd-build 
