vue.js - Vue - 补间未创建的组件

Question

我有一个基于 json 对象呈现的动态组件。

 <template v-for="(vehicle, index) in vehicles">
 <component
    :class="`item${index}`"
    :is="vehicle.type"

  />

车辆类型是可以是汽车、摩托车或卡车的组件。本质上，这就是应该呈现的内容。

<car />
<motorbike />
<lorry />

我遇到的问题是因为这些是动态组件，它们不使用 css 类或 vue 进行补间$refs。

  this.$forceUpdate();
  TweenMax.fromTo(this.$refs.item[0], 2, {
        opacity: 0,
        x: -300,
        ease: Power2.easeIn,

      }, {
        opacity: 1,
        x: 0,
        delay: 1
      });

我试过使用$nextick()and $forceUpdate(); 但补间不会触发。它看起来像是反应性警告之一。在旧的 jquery 时代，我认为 defer 会修复它。

有没有办法通过 ? 使动态组件可用$refs？

使用的补间引擎是gsap。