<div id="app">
  <div class="p-5">
    <h2>多個 v-model</h2>
    {{ text }} / {{ text2 }}
    <custom-input2 v-model:t1="text" v-model:t2="text2"></custom-input2>
  </div>
</div>

const app = Vue.createApp({
  data() {
    return {
      text: '這是文字片段 1',
      text2: '這是文字片段 2'
    }
  }
});

// $emit('update:text', $event.target.value) 搭配 props，可以將更新後的值寫回 v-model 內
app.component('custom-input2', {
  props: ['t1', 't2'],
  template: `
  <input type="text"
  :value="t1"
  @input="$emit('update:t1',$event.target.value)"
  class="form-control">

  <input type="text"
  :value="t2"
  @input="$emit('update:t2',$event.target.value)"
  class="form-control">
  `
})

app.mount('#app');