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/vue-progressbar@0.7.5/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/vue-progressbar@0.7.5/dist/vue-progressbar.min.js"></script>

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