fix(v-model): create non-existent properties as reactive

[allex]

fix v-model assign non-existent properties as reactive.

<MyComponent vModel={a.b} />

to

<MyComponent model={{
  value: a.b,
  callback: $$v => {
    this.$set(a, "b", $$v); // a.b = $$v;
  }
}} />

[vue-bot]

Hey @allex, thank you for your time and effort spent on this PR, contributions like yours help make Vue better for everyone. Cheers! 💚

[jvbianchi]

If you use JSX inside setup, this won't be defined (as per spec) and this PR will cause errors.

[sodatea]

@jvbianchi Any reproductions? Also, I think @vue/composition-api is not fully compatible with this preset anyway. Before this PR, we already transformed code like vModel={a['b']}.

[jvbianchi]

@sodatea here is the reproduction: https://github.com/jvbianchi/jsx-vmodel-reproduction

just change the value in the input, you will get this error:

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property '$set' of undefined"

TypeError: Cannot read property '$set' of undefined

Before this PR it worked fine.

[tiepnguyen]

@jvbianchi this issue is real, I also ran into this error 2 days ago after npm update and I didn't know why until I found this PR, now all my v-model inside setup() are not working. May becus this does not exist in setup() ? I don't know but trying to roll back to 1.1.0

[jvbianchi]

@tiepnguyen Yes, if you rollback to a previous version, it works fine.

@sodatea Should I open a new issue?

[sodatea]

We could track it in a separate issue. But I'm still thinking about whether we should support @vue/composition-api in this library. There may be many edge cases because the current implementation is heavily depended on this. Maybe this should be transformed in https://github.com/luwanquan/babel-preset-vca-jsx instead.

[jvbianchi]

@luwanquan What do you think?

[dxyqqs]

Hi @allex & @sodatea ,
if 'v-model' was used in the functional component, the 'this' will be null.

Cannot read property '$set' of null

e.g:
<tag vModel={parent.props}></tag>