How to use/configure this package, on single index.html page without npm?

[zarpio]

Following is my code, just want to configure vue-progressbar on this single page directly without NPM.

Problem: Unable to configure progress bar component.

Body:

<div id="app">
     <ul>
          <li v-for="goal in goals">{{ goal.title }}</li>
     </ul>
     <vue-progress-bar></vue-progress-bar>
</div>

Js:

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-progressbar.min.js"></script>
	<script type="text/javascript">
	new Vue({
	    el: '#app',
	    components: {
	        vue-progress-bar: window['vue-progressbar']
	    },
	    data: {
	    	goals: {},
	    	page: 1
	    },
	    mounted() {
			this.getGoals();
		},
	    methods: {
			getGoals(page = 1) {
				this.$Progress.start();
			    axios.get('/api/goals?page=' + page)
			        .then(response => {
			            this.goals.page = page;
			            this.goals.list = response.data;
			            this.$Progress.finish();
			        });
			},
	    }
	});
	</script>

[zarpio]

By the way, I have found myself... it was easy now it is working fine... as following.

<div class="row" id="app" >
    <vue-progress-bar></vue-progress-bar>
    ....
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-progressbar.min.js"></script>

<script>
Vue.use(VueProgressBar, {
    color: '#bffaf3',
    failedColor: '#ff0000',
    thickness: '5px'
});
new Vue({
    el: '#app',
    ...
)};
</script>