I have the following code in my App.vue file:

v-radio-group(inline v-model="mode")
  v-radio(label="Find distance" value="two")
  v-radio(label="Find station" value="calc")

The label displays fine, but the circle of the radio button doesn’t display.
I have no CSS affecting radio buttons as far as I can tell (a decent chunk of my code for this project has been copy and pasted from another project). style.css is an empty file and this is the CSS at the bottom of the App.vue file.

<style>
.guess {
  animation: fadeIn 0.3s;
  transform-origin: center;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  /* border: 1px solid grey; */
  display: inline-block;
  color: #444;
}

.breaker {
  padding-right: 10px;
}

.textbox {
  margin: auto;
  /* padding-right: 20px; */
  width: 100%;
}

.guesses tr:first-child {
  background: hsl(60, 70%, 90%);
}

.guesses tr:first-child .guess {
  color: black !important;
}

@keyframes fadeIn {
  0% {
    opacity: 0.3;
    transform: scale(0.5);
  }
  70% {
    transform: scale(1.25);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
</style>

I’ve tried:

• Commenting out all the CSS at the bottom of the file.
• Adding a style=”visibility:visible” to the v-radio and v-radio-group tag.

Any help would be much appreciated!