rendering is fine, but it destroys subsequent updates.

this is an example: both p can be updated on the first click, but only the contents of the second p will be updated after the second click.

var Child = {
  props: {
    text: {},
  },
  render: function(createElement) {
    return createElement('p', this.text);
  },
};

Vue.component('ele', {
  data() {
    return {
      text: 'test',
    };
  },
  render: function(createElement) {
    var ChildNode = createElement(Child, {
      props: { text: this.text },
      nativeOn: {
        click: () => {
          this.text = 'clicked ' + new Date();
        },
      },
    });
    return createElement('div', [ChildNode, ChildNode]);
  },
});

new Vue({
  el: '-sharpapp',

  template: `
    <div id='app'>
      <ele />
    </div>
  `,
});

this is because the current implementation of vue will associate vnode with its rendered dom element one-to-one. When you render twice with the same vnode, vnode will only be associated with the last rendered dom element, so only the last dom can be updated in the patch phase.

this is essentially a defect of vue. Github already has related issue requests for vue to support vnode reuse, because this way of use is intuitive on the one hand, and there are actual usage scenarios on the other.

-Update
v2.5.18 vue supports vnode reuse.

ask the same question, has the landlord found the answer? I also directly render two

the same question, has the landlord found the answer? I also render two