JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="counters"></div>

JavaScript

Vue.component('counter', {

		props: ['initialCount'],
    
		data: function(){
				return {
        		count: Vue.util.extend({}, this.initialCount),
        }
    },
    
    created: function(){
    			//this.count = Vue.util.extend({}, this.initialCount);
    },
    
    methods: {
    		countAdd: function(){
        		this.count.num++;
        },
    		initialCountAdd: function(){
        		this.initialCount.num++;
        },
    },
    
    template: '<div>\
    count: {{count.num}}, initialCount.num: {{initialCount.num}} <br>\
    <button type="button" @click="countAdd">count.num++</button>\
    <button type="button" @click="initialCountAdd">initialCount.num++</button>\
    \
    <br><br></div>'
    
});


var counters = new Vue({

    el: "#counters",
    
		data: function(){
				return {
        		initialCounters: [
            	{num: 42, text: 'Lorem'},
            	{num: 23, text: 'Ipsum'},
            ]
        }
    },
    
    methods: {
    		firstObjCountAdd: function(){
        		this.initialCounters[1].num++
        },
    },
    
	 	template: '<div>\
    <div>\
    <h2>Parent initialCounters data:</h2>\
    {{initialCounters}}\
    <br> <button type="button" @click="firstObjCountAdd">initialCounters[1].num++</button> \
    <br>\
    <br>\
    <br>\
    <h2>Looped children counter components:</h2>\
    <counter v-for="singleCounter in initialCounters" :initialCount="singleCounter" ></counter>\
    <div>\
    </div>'
})