JSFiddle - React, Tailwind, and code Playground
HTML
<div ref="root" v-scope="DateTime({ value: 1644318183183 })">
<span v-text="value">1644318183183</span>
</div>
JavaScript
import { createApp } from 'https://unpkg.com/petite-vue?module';
function DateTime(props = {}) {
let value;
return {
get value() {
// If the "value" property is a getter then it is referencing an outer variable so we should always get it.
return value = value === undefined || Object.getOwnPropertyDescriptor(props, 'value').get !== undefined ? props.value : value;
},
set value(val) {
value = val;
this.$refs.root.dispatchEvent(new CustomEvent('update:value', { bubbles: true, detail: value }));
}
};
}
createApp({
DateTime
}).mount();