fix: destructure attrs from context keep reactive, close #264

[antfu]

No description provided.

[pikax]

This has a limitation is added $attrs are not updated

 it('attrs should be reactive after destructuring', async () => {
    let _attrs: SetupContext['attrs'] = undefined!
    const foo = ref({ foo: 'bar' })

    const ComponentA = defineComponent({
      setup(_, { attrs }) {
        _attrs = attrs
      },
      template: `<div>{{$attrs}}</div>`,
    })
    const Root = defineComponent({
      components: {
        ComponentA,
      },
      setup() {
        return { foo }
      },
      template: `
        <ComponentA v-bind="foo"/>
      `,
    })

    const xxx = createApp(Root).mount()
    if (xxx) {
      debugger
    }

    expect(_attrs).toBeDefined()
    expect(_attrs.foo).toBe('bar')
    expect(_attrs.other).not.toBeDefined()

    foo.value.foo = 'bar2'
    //@ts-ignore
    foo.value.other = 'other'

    await nextTick()

    expect(_attrs.foo).toBe('bar2')
    expect(_attrs.other).toBe('other') // not working
  })

[antfu]

Yes. But I don't think it can be fixed without Proxy. I should update the docs about the caveat, or do you have any idea on this?

[pikax]

I also tried a few was to fix this but without success, add a caveat to the docs should be enough