Vuetify v-switch no cambia visualmente

Question

Estoy usando el componente v-swich en uno de mis componentes secundarios. El componente en sí se representa a la vista, pero cuando hago clic en él, toogle no cambia el estado visualmente.

Seguí este tutorial para importar v-switch manualmente en el componente secundario https://vuetifyjs.com/en/customization/a-la-carte/#manually-importing

Componente hijo

<template>
    <v-switch v-model="switch1" :label="`Switch 1: ${switch1.toString()}`"></v-switch>
</template>


<script>
import { VSwitch } from 'vuetify/lib'

export default {
    name: 'Configurator',
    components: {
        VSwitch
    },
    props: ['product', 'variants'],
    data()
    {
        return {
            switch1: true
        }
    }
}
</script>

Main.js

import Vue from 'vue';
import ConfiguratorApp from './components/Configurator.App';

let vm = new Vue({
    el: '#configurator-app',
    render: h => h(ConfiguratorApp)
});

Entonces, ¿qué me estoy perdiendo aquí?

Answer 1

Vuetify necesita su envoltorio v-apppara funcionar correctamente.

<template>
  <v-app>
      <v-switch v-model="switch1" :label="`Switch 1: ${switch1.toString()}`"></v-switch>
  </v-app>
</template>

Solo agréguelo como el componente raíz de su aplicación.