$slots elements are not rendered if it derived by computed prop

Vue.js version

2.0.0-rc.3

Reproduction Link

https://jsfiddle.net/ktsn/oc8g5dcm/6/

Steps to reproduce

Click “Add List” button.

What is Expected?

Both test1 and test2 components render the elements passed to $slots.

What is actually happening?

The test2 renders the elements but test1 is not.

Note that we can avoid this issue if adding cache: false option for the computed option.

[xxRockOnxx]

I ran into this problem and the solution to this one is simply using a getter method (i.e getSlots()) instead of hacks like adding a random property just so you can use a computed property and reference the said random property inside it.

Referencing OP’s jsfiddle, instead of:

computed: {
  firstSlot() {
    return this.$slots.default
  }
}

do this:

methods: {
  getFirstSlot() {
    return this.$slots.default
  }
}

This solution applies to any other non-reactive properties and not only $slots

[LinusBorg]

That kind of warning would be hard to implement because there may be scenarios where someone uses $slots inside a computed property for a good reason, and only wants it to update when another, reactive value changes.

So Vue would have to check weither only non-reactive elements are used, which is not worth it in my opinion.

We should rather make it clear in the guide and API docs that computed properties only react to changes references to data, props and other computed properties.

@chrisvfritz opinions?