JSFiddle - React, Tailwind, and code Playground

by imall

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
  <div id="app">
    <h1>{{ first }} {{ last }}</h1>
    <my-component v-model:first-name="first" v-model:last-name="last">
    </my-component>
  </div>

JavaScript

const app = Vue.createApp({
      setup() {
        const first = Vue.ref("John");
        const last = Vue.ref("Doe");

        return {
          first,
          last,
        };
      },
    });


    app.component("my-component", {
      template: `
  <input
    type="text"
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
  />
  <input
    type="text"
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
  />
      `,
      props: ["firstName", "lastName"],
      emits: ["update:firstName", "update:lastName"],
    });

    app.mount("#app");