短背景

我有一个vue-cli环境，使用Vue 2，使用options-api，我已经开始转换到create-vue，一个基于Vite的环境，使用Vue 3和Typescript。我已经使用Stencil做了一个npm包，在我的项目中导入它的web组件。它在我早期的技术堆栈中工作得很顺利，但现在我似乎不能理解哪里出了问题。
我现在的状态
当我开始在新环境中导入npm包时，我遇到了一系列错误，我不得不将Stencil从v2.7.0升级到v2.16.1，并添加experimentalImportInjection以确保Stencil为Vite正确编译组件。

// stencil.config.ts

...
extras: {
  experimentalImportInjection: true
}

我现在的主要问题是，组件加载，他们看起来正确，但我有问题发送 prop 给他们。
在模板中，我声明了 prop ：

@Prop() state: 'none' | 'focus' | 'active' = 'none';

  @Prop() label: string;

  @Prop() meta: string;

  @Prop() disabled = false;

  @Prop() valid?: true | false | null = null;

在我的Vue代码中，我这样声明自定义组件：

<fds-input id="loginEmail" label="Email" meta="meta text" :valid="false" :disabled="isDisabled">
  <input type="email" v-model="email" @blur="checkEmail" data-cy="input-text-email"/>
</fds-input>

我在这里的主要目标是改变valid的值，以触发我的web组件有效或无效的状态，它有不同的css风格。
∮我至今所发现的∮
1.改变:valid的值不会改变任何东西，我已经尝试过将值作为字符串和布尔值发送。
1.更改meta或label可以很好地工作，无论是作为绑定值（： meta="”）还是作为常规属性（meta="”）。
1.当我在浏览器（Chrome）中检查元素时，我只能看到元素上的id和class。
1.当我添加一个setTimeout并在其中添加vanilla javascript来设置属性valid="false"时，它会触发我想要的组件的状态。
1.将Stencil升级到v2的最新版本不会更改任何内容。