Just use vue.js!

Add vue

First we need the javascipt, just add this script tag on the bottom of the page

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

So, vue is added. Next, we need to set a place for vue to load.

Initialize vue

Add a section using an id on the page

<div class="container" id="vue-app">
    ...
</div>

And ad a piece of javascipt to initialize vue

var app = new Vue({
    el: '#vue-app'
});

This will initalize vue on the page. All items within this section will be monitored bu vue.js, so we can place elements on it.

Create a simple todo component

Add a simple todo component, just before you initialize vue in the previous step.

Vue.component('todo-component', {
    template: '#todo-component',
    data: function () {
        return {
            items: [{
                id: 'item-1',
                title: 'Checkout vue',
                completed: false
            }, {
                id: 'item-2',
                title: 'Use this stuff!!',
                completed: false
            }],
            newItem: ''
        };
    },
    methods: {
        addItem: function () {
            if (this.newItem) {
                var item = {
                    id: Math.random(0, 10000),
                    title: this.newItem,
                    completed: false
                };

                this.items.push(item);
                this.newItem = '';
            }
        }
    }
});

Template

If you noticed, i used a template: '#todo-component', in my component. This is because the inline templates of vue are cumbersome and i like my templates clean and expandable. So i added them in a script tag outside my #vue-app section. Note the id="todo-component" referenced from my component.

<script type="x-template" id="todo-component">
    <div>
        <h3>Example vue todo component</h3>
        <div v-for="item in items" class="form-group">
            <div class="input-group">
                <div class="input-group-prepend">
                    <div class="input-group-text">
                        <input type="checkbox" v-model="item.completed">
                    </div>
                </div>
                <input type="text" v-model="item.title" class="form-control" :class="{'is-valid': item.completed}">
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <input type="text" v-model="newItem" class="form-control">
                <div class="input-group-btn">
                    <button class="btn" :class="{'btn-primary': newItem}" @click="addItem()">add!</button>
                </div>
            </div>
        </div>
    </div>
</script>

Putting it all together.

Add a main section using an id
Add a template after this
Import cdn
Add a component js
Initialize vue

And done. Check it out on the right side, or below this on mobile. Cheers.

Initialize vue

Add a section using an id on the page

Create a component

Add a simple todo component, just before you initialize vue in the previous step.

Add a template

Add a template on the page to use on your component

Hello, world!

Add vue

Initialize vue

Create a simple todo component

Template

Putting it all together.

Initialize vue

Create a component

Add a template