Provide observed data

[jjvainav]

I need a little help. I would like to provide an observed property but it is not working as expected:

@Provide() get foo() { return this.bar; }
bar: string = "baz";

In my child component I have:

@Inject() foo: string;

The value "baz" is initially bound to foo correctly but foo is not reactive.

Note: this works using functions but this really isn't ideal.

@Provide() get foo() { return () => this.bar; }

@Inject() foo: () => string;

If it helps, I am attempting something similar to this example:

const Provider = {
  provide () {
    const foo = {}
    Object.defineProperty(foo, 'bar', {
       enumerable: true,
       get: () => this.bar,
    })
    return { foo }
  },
  data: () => ({ bar: 'baz' })
}

[rrandom]

I think It's reasonable because the original version of Vue supported it.

[FuDesign2008]

Now, what is the best practice ?

[FuDesign2008]

I want to use one prop to provide value for all child components

class Parent extends Vue {
     @Prop({
        type: Number
        default: 0
     })
    readonly weight!: number

    //  how to provide prop `weight` as `weightFromParent`  ?
   @Provide 
    weightFromParent: ???
}

class Kid extends Vue {
     @Inject({
         from: 'weightFromParent',
         default: 0,
      })
     private readonly weight!: number
}

Is there a good practice ?