<div id="app">
  <div class="p-5">
    <div class="mb-3">目前的componentName值：{{componentName}}</div>
    <input type="text" v-model.lazy="componentName" class="form-control">
    <div id="help" class="form-text">將input內容改為alert2試試看</div>
    <div v-is="componentName" class="mt-3"></div>
  </div>
</div>

const app = Vue.createApp({
  data() {
    return {
      componentName: 'alert1'
    };
  }
})

app.component('alert1', {
  template: `<div class="alert alert-primary" role="alert">
      範例ㄧ
    </div>`,
});
app.component('alert2', {
  template: `<div class="alert alert-primary" role="alert">
      範例二
    </div>`,
});

app.mount('#app');