Vue: Computed to work with Props

[ardoramor]

I posted the below in issue #1972 but was not sure if the notifications go out because its a closed issue.

I'd like to see if the issue can be reopened. Lets say there is a component that does something like so:

// Child component
<template>
  <div v-el:widget></div>
  <p>{{msg}}</p>
</template>

<script>
  {
     props: {
        msg: {
           type: String,
           required: false,
           default: 'Hello!'
        }
     },
     computed: {
        msg: {
           cached: false,
           get: function () {
              $(this.$els.widget).get('text');
           },
           set: function (value) {
              $(this.$els.widget).set('text', value);
           }
        }
     },
     ready: function () {
        $(this.$els.widget).superWidget({
           text: this.msg
        });
     }
  }
</script>

And the parent script can define an instance of child like so:

<template>
  <child :msg="greeting"></child>
</template>

In my view, this creates a very powerful interaction because computed is an interface to an underlying value generator/container/producer while props declares that the values can be passed in.

Of course, I'm not that well familiar with the underlying code of Vue yet, but, internally, the props value provider can assign the value that will trigger a call to set, which will update the internal value.

[yyx990803]

I think this is more confusing than useful. In particular, having two sources for the same thing is just a big red flag. A prop should be passed in from parent, and the child should not mess around how that value is derived.

A prop is a prop and a computed is a computed. If you can achieve what you want with them separated, then there really is no point in mixing them.