• Template is downloaded fully from external location (including root element)
• Template can contain bindings
• Component is registered as custom element

I tried this one:

async function getTemplate() {
  const response = `
    <div>
      <h1>{{ message }}</h1>
    </div>
  `;

  return await Promise.resolve(response);
}

const MyCustomElement = {
  data() {
    return {
      template: null,
      message: 'Hello, I am a Vue component!'
    };
  },
  async created() {
    this.template = await getTemplate();
  },
  render() {
    if (this.template == null)
        return Vue.h('div', 'Loading...');

    return Vue.h(Vue.compile(this.template)); // ERROR!
  }
};

const element = Vue.defineCustomElement(MyCustomElement);

customElements.define('my-component', element);

Vue.createApp({}).mount('#app');

It says message is not defined. Any ideas why it cannot find the defined property?
Should it be implemented in any other way?
It is VueJS 3, the latest one (3.4.25).