fix(custom-element): update initial render for defineCustomElement to run after nextTick

[jcbond92]

Problem

There is an edge case where using Vue generated custom elements inside of a Vue app with v-model will cause duplication inside of the ShadowRoot.

Solution

Waiting for the nextTick seems to resolve a collision between v-model and the custom element's initial render. This fix also limits impact to custom element users rather than all Vue users.

For example, you can also resolve the issue by putting a small timeout (or presumably also waiting for nextTick) around the initial setting of the value in vModel.ts.

mounted(el, { value }) {
    setTimeout(() => {
      el.value = value == null ? '' : value
    }, 1)
  },

Testing the fix

Here are some examples in Stackblitz and the SFC playground to test the change:

• Custom elements duplicating sometimes when using v-model
• No duplication with the nextTick update

close: #9885

[jcbond92]

Found a better solution that can be implemented by library authors instead of making the change here in Vue core.

#9885 (comment)

Edit: the solution I thought would fix this that we could implement in our components didn't actually work in all scenarios. Updating this PR to get tests passing.

[jcbond92]

This can be removed once reviews are complete, I just wanted to add a quick way to show the fix in the SFC playground for reviewers.