JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <input v-model="value">
  <my-child v-model="value">
    Click
  </my-child>
</div>

JavaScript

const { createApp, watch } = Vue

const MyChild = {
  template: `
    <div>{{ modelValue }}</div>
  `,

  props: ['modelValue'],
  emits: ['update:modelValue'],

  setup (props, { emit }) {
    // Strip non-numbers
    const fixValueFormat = v => v.replace(/\D/g, '')
    
    watch(
      () => props.modelValue,
      (value, prevValue) => {
        const correctedValue = fixValueFormat(value)
        console.log(value, correctedValue)
      if(correctedValue != value)
        emit('update:modelValue', correctedValue);
    });
  }
}

createApp({
  components: {
    MyChild
  },
  
  data () {
    return {
      value: '1'
    }
  }
}).mount('#app')