Computed Setter Does Not Work In Scoped Slot

[pxwee5]

Version

2.6.10

Reproduction link

https://codepen.io/jameswee/pen/BaaxLmE

Steps to reproduce

1. Create computed setter in parent and pass it into scoped slot
2. Attach computed setter via scoped slot into child's v-model
3. Test

A working example is available if you comment out line 2 and uncomment line 3.

What is expected?

Editing the input box should trigger the alert function

What is actually happening?

Editing input box isn't triggering the computed setter.

[posva]

This is inherent to how reactivity works in Vue (by setting reactive keys in objects) and how slots receive the data as parameters in a function.
To make it work, you would have to wrap the variable in some kind of container that has reactive keys:

const parent = Vue.component('parent', {
  template: '<div><slot :container="fooContainer" /></div>',
  
  computed: {
    foo: {
      get: function() {
        return "foo";
      },
      set: function(value) {
        alert(value);
      }
    },
    fooContainer() {
      const o = {}
      Object.defineProperty(o, 'foo', {
        get: () => this.foo,
        set: foo => this.foo = foo
      })
      return o
    }
  }
})

new Vue({
  el: '#app',
  components: {
    parent
  },
  template: `
    <parent>
      <template #default="{ container }">
        <input v-model="container.foo" />
      </template>
    </parent>`,
})

For it to work without containers, we would have to make the object you named slot reactive but that would add a cost for every slot usage and I think that would impact more users than it helps

[pxwee5]

Hmmm, this is tricky isn't it. At first glance it's really hard to understand the usage of fooContainer function, which eventually makes the code really hard to review.

It'll be nice if there's a way to make these a bit more consistent. I wonder if this will be addressed in v3 ?