<script setup lang="ts">
import { watch } from "vue";
import { useVModel } from "@vueuse/core";

const props = defineProps<{
  modelValue: string;
  placeholder?: string;
}>();

const modelValue = useVModel(props, "modelValue");

function valid(value) {
  return value.replace(/[^\d]/g, "");
}

watch(
  () => modelValue.value,
  value => (modelValue.value = valid(value))
);
</script>

<template>
  <ElInput v-model="modelValue" :placeholder="placeholder" />
</template>
