Vue.js：计算值处理

Question

我有一个子组件，它从Vue2Leaflet库扩展了LPolygon。

LPolygon上有一些属性，为了简单起见，我们采用了color属性。

在<l-polygon :color="foo">之类的标记中设置，在这种情况下，颜色由父组件设置。

我想做一些迭代，然后根据x中包含的数据，我想设置l-polygon组件的颜色。

怎么做？

以下是一个更全面的例子：

<template v-for="x in foo">
  <l-polygon v-for="y in bar" v-if="x.id == y.id" :color="COMPUTE_THIS">
  </l-polygon> 
</template>

其中，COMPUTE_THIS应该是一个可以从x和y中获取数据并返回值的函数。

我想到的是扩展LPolygon组件并将x和y对象作为props绑定到它中。但我不知道如何修改LPolygon.color属性。如果我试图这样做，vue会抱怨直接修改道具。