Vuetify v-radio label got broken after using label slot once

Question

Context:

I've decided to create a v-radio button with v-text-field as a label for it.

I used the label slot like this:

<v-radio
  v-for="option in question.options"
  :key="option"
  :label="option"
  :value="option"
>
  <template #label>
    <v-text-field
    label="Test"
    />
  </template>
</v-radio>

Problem:

This is the output that I got when applying the previous code snippet:

Additional Info:

I checked another normal radio button in the project (which is copied from Vuetify docs)

The code is as follows:

<v-radio
  label="red darken-3"
  color="red darken-3"
  value="red darken-3"
/>

Here is the output for that code:

Question:

Is there a way to get a normal radio button with input text without having two radio button "circles"?

Vuetify version: ^2.4.5

Answer 1

Finally, I got it fixed after digging for hours I realized that I have tree-shaking enabled in my Vuetify. I mean I was importing Vuetify like this

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify()

I changed it back to

import Vue from 'vue'
import 'vuetify/dist/vuetify.min.css'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

export default new Vuetify()

after that, it worked always as expected. I still don't know how to get it fixed with tree-shaking enabled.