bug：@formily/vue Field.component[1] api无法响应更新

[Venusjason]

import { defineComponent, ref, onMounted } from 'vue'
import { Select, Input } from 'ant-design-vue'

import { createForm } from '@formily/core'
import { FormProvider, Field, FormConsumer } from '@formily/vue'

export default defineComponent({
  setup () {
    const form = createForm()

    const opts = ref([
      { label: '111', value: 1 }
    ])

    const width = ref(200)

    const onSearch = () => {
      setTimeout(() => {
        opts.value = [
          { label: '111', value: 1 },
          { label: '222', value: 2 }
        ]

        console.log(opts)
      }, 1000)
    }

    onMounted(() => {
      setTimeout(() => {
        width.value = 1000
        console.log('setTimeout')
      }, 3000)
    })

    return () => {
      return (
        <div>
          <p>tsx</p>
          <Select placeholder="请输入"></Select>
          <FormProvider form={form} >
            <Field name="input" component={[Input]} />
            <Field
              name="name"
              component={[Select, {
                style: { width: `${width.value}px` },
                options: opts.value,
                onSearch: onSearch,
                showSearch: true
              }]}
            ></Field>

            <FormConsumer>
              {{
                default: ({ form }: any) => (
                  <div>{JSON.stringify(form.values)}</div>
                )
              }}
            </FormConsumer>
          </FormProvider>
        </div>
      )
    }
  }
})

width 的值从 200 更新到 1000，而试图上仍旧是200， select.options 也无法更新

[janryWang]

这个问题其实不是Bug，一开始设计就是这么设计的，React这边也一样，就是不会监听属性变化自动更新字段状态，除非是走的reactions或者effects模式，可以看看这篇文档，https://v2.formilyjs.org/zh-CN/guide/advanced/controlled#%E5%8F%8D%E6%A8%A1%E5%BC%8F 但是Vue这块可能对于监听属性变化有更优雅的方式，这个需要再详细看看

[Venusjason]

谢谢 这确实不是一个BUG 感谢作者