JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="divCounting">
  <print-count v-model:count="count"></print-count>
</div>

<template id="templateCounting">
  This is the current count: {{count}}<br>
  <button @click="increment">Increment</button>
</template>

<script type="text/javascript">
  var MyData = {
    data() {
      return {
        count: 2
      }
    }
  };

  var myCount = Vue.createApp(MyData);

  myCount.component('print-count', {
    props: ['programs', 'count'],
    emits: ['update:count'],
    template: '#templateCounting',
    methods: {
      increment() {
        this.$emit('update:count', this.count + 1)
      }
    },
  });

  myCount.mount('#divCounting')

</script>