api.rerender() doesn't work when using components with slots

[skyrpex]

Error

Vue Hot Reload API doesn't work as expected when using api.rerender() on a component that uses slots.

export default {
  render() {
    return (
      <button>
        {/* Try adding and then removing the TEST text. It won't be removed, just added as many times as you save. */}
        {this.$slots.default} TEST 
      </button>
    );
  },
};

How to reproduce

npm run test:webpack will start a development server. Go to tests\webpack\src\nativeModules\button.jsx, add / remove the TEST text and save.

Workaround

Wrap your slots inside another node (like a span):

export default {
  render() {
    return (
      <button>
        <span>
          {this.$slots.default}
        </span>
        {/* You're safe editing this */
        TEST
      </button>
    );
  },
};

Notes

api.reload() works as expected (the whole component gets rerendered).

[nddery]

This seems like a bug in Vue vm.$forceUpdate() method - https://jsfiddle.net/5k4ptmqg/87/ (after 1 second $forceUpdate is called and the bug is seen)

edit ($forceUpdate is what's called by Vue Hot Reload API when calling rerender (here)

I'll open an issue over there.

[nddery]

Seems like this was fixed (at least for templates) in 2.1.5, the release notes mentions:

Small across-the-board performance improvement for render functions compiled from templates. They now skip the normalization of nested children arrays based on information inferred from the templates at compile time.

However, this issue still persists when using render function (hence JSX), and potentially .vue files also ?

https://jsfiddle.net/5k4ptmqg/89/

[skyrpex]

Thanks for finding where the error is. Did you finally create an issue in Vue's repository?

[skyrpex]

Looks like this problem is already fixed in new versions of Vue 👍