Vue中的动态指令

Question

我从第三方库中使用了各种指令。这些指令例如是：

<v-rect :config="rectConfig"></v-rect>

<v-circle :config="circleConfig"></v-circle>

<v-triangle :config="triangleConfig"></v-triangle>

如您所见，形状本身决定了我使用的指令。

但是，当该形状是动态的并且可以动态更改时该怎么办？我希望指令本身受形状驱动。因此，我将如何实现类似于以下的目标？

<v-{{shape}} :config="config"></v-{{shape}}> 

// ^^ Should render as <v-rect>

data() {
  return {
    shape: 'rect',
    config: {
      ...
    }
  }
}