JSFiddle - React, Tailwind, and code Playground

HTML

<div v-scope="{ startDate: Date.now() }">
  <div ref="root" v-scope="DateTime({ get value() { return startDate }})" @update:value="startDate = $event.detail">
    {{ value }} <button @click="value = Date.now()">Set Date</button>
  </div>
  <div ref="root" v-scope="DateTime({ value: Date.now() })">
    {{ value }} <button @click="value = Date.now()">Set Date</button>
  </div>
</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();