写一个单选框，选项前面有圆点，点击圆点填色

可以使用 CSS 来实现这个效果，具体步骤如下：

1. 使用 `::before` 伪元素在单选框选项前添加一个圆点。
2. 当单选框被选中时，使用 `:checked` 选择器来设置圆点颜色为填充颜色。

下面是一个实现这个效果的示例代码：

<template>
  <div>
    <label v-for="option in options" :key="option.value" class="radio-label">
      <input type="radio" :value="option.value" v-model="selectedOption" class="radio-input" @click="toggleSelected(option)" />
      <span class="radio-dot"></span>
      <span class="radio-text">{{ option.label }}</span>
    </label>
  </div>
</template>

<style>
.radio-label {
  display: block;
  margin-bottom: 10px;
}

.radio-input {
  display: none;
}

.radio-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 10px;
  border: 2px solid #ccc;
}

.radio-input:checked + .radio-dot {
  background-color: #007bff;
  border-color: #007bff;
}

.radio-text {
  display: inline-block;
  font-size: 16px;
  line-height: 1.2;
}
</style>

在上面的示例中，我们使用了 `.radio-dot` 样式来设置圆点的样式，并使用 `:checked` 选择器来设置选中状态下的样式。同时，我们也给单选框的外部标签和文本设置了样式，使得单选框看起来更加美观。