Vue.js：v-html没有按预期工作

Question

我正在使用keen-ui库，它是一个轻量级Vue.js UI库。我正在使用库中的ui-select组件。我正在尝试使用v-html属性，但它在某种程度上无法按预期工作。我在模板中有以下代码：

  <template>
  <ui-select
            label="Color"
            placeholder="Color"
            :options="SelectColors"
            v-model="color"
            v-html="red"
        ></ui-select>
 </template>

 <script>
import { UiSelect } from 'keen-ui'
export default {
   data () {
      red: '<div class="foo red"></div>',
      SelectColours: [
    {
      label: this.red,
      value: 'red'
    }]
   },
   components: { UiSelect }
}

<style>
.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.red {
  background: red;
}
</style>

我希望它只显示红色框的选项。知道为什么它没有像我期望的那样工作吗？