JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
        <ol>
            <list-item
                v-for="item in lists"
                v-bind:elem="item"
                v-bind:key="item.id"></list-item>
        </ol>
    </div>

    <script>
        Vue.component('list-item',{
            props: ['elem'],
            template: '<li @click="change(elem)">{{ elem.text }}</li>',
            methods: {
                change: function(elem) {
                		elem.text = "23123123";
                }
            }
        });
        var app = new Vue({
            el: "#app",
            data: {
                lists: [
                    {"id": 1, "text": "11"},
                    {"id": 2, "text": "22"},
                    {"id": 3, "text": "33"},
                ]
            }
        });
    </script>