JSFiddle - React, Tailwind, and code Playground

by shubhampokhriyal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.js"></script>
<div id="app">
    <my-component :when-increased="increased"></my-component>
</div>

    <template id="my-template">
        <div style="border: 1px solid; padding: 5px;">
            <p>A counter: {{ count }}</p>
            <button @click="increaseCount">Internal Button</button>
        </div>
    </template>

JavaScript

var vm = new Vue({
    el: '#app',
    components: {
        'my-component': { 
            template: '#my-template',
            props: ['when-increased'],
            data: function() {
                return {
                    count: 1,
                };
            },
            events: {
            	increaseCountOnChild: function() {
                	this.increaseCount();
                }
            },
            methods: {
                increaseCount: function() {
                   this.count++;
                }
            }
        },
    },
    

});