JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/nkovacs/vue/server-side/dist/vue.js"></script>
<p>This is a simple binding: <!-- {{test -->Server side<!-- }} --></p>

<p><!-- {{status --> Vue not loaded yet! <!-- }} --></p>

<p><a v-on="click: testclick">Click me</a></p>

<div>
    <input type="text" name="foo" value="Server value" v-model="foo" />
    
    <!--{{foo-->Server value<!--}}-->
</div>

<ul>
    <li v-repeat-idx="0" v-transition="staggered"><!--{{item.name-->one s<!--}}--></li>
    <li v-repeat-idx="1" v-transition="staggered"><!--{{item.name-->two s<!--}}--></li>
    <li v-repeat-idx="2" v-transition="staggered"><!--{{item.name-->three s<!--}}--></li>
    <li v-repeat-idx="3" v-transition="staggered"><!--{{item.name-->four s<!--}}--></li>
    <li v-repeat-idx="4" v-transition="staggered"><!--{{item.name-->five s<!--}}--></li>
    <li v-repeat-idx="5" v-transition="staggered"><!--{{item.name-->six s<!--}}--></li>
    <li v-repeat-idx="6" v-transition="staggered"><!--{{item.name-->seven s<!--}}--></li>
    <li v-repeat-idx="7" v-transition="staggered"><!--{{item.name-->eight s<!--}}--></li>
    <li v-repeat-idx="8" v-transition="staggered"><!--{{item.name-->nine s<!--}}--></li>
    <li v-repeat-idx="9" v-repeat="item: items" v-transition="staggered" stagger="100"><!--{{item.name-->ten s<!--}}--></li>
</ul>

<p><a v-on="click: replaceItems">Replace items</a></p>

JavaScript

setTimeout(function() {
    new Vue({
        el: 'body',
        data: {
            test: 'Client-side binding',
            status: 'Vue loaded',
            foo: '',
            items: [
                {name: 'one'},
                {name: 'two'},
                {name: 'three'},
                {name: 'four'},
                {name: 'five'},
                {name: 'six'},
                {name: 'seven'},
                {name: 'eight'},
                {name: 'nine'},
                {name: 'ten'}
            ]
        },
        methods: {
            testclick: function() {
                this.test = "Clicked!";
            },
            replaceItems: function() {
                this.items = [];
                for (var i = 0; i < 10; i++) {
                    this.items.push({
                        name: 'replaced ' + i
                    });
                }
            }
        }
    });
}, 2000);