Vuetify v-switch não alternando visualmente

Question

Estou usando o componente v-swich em um dos meus componentes filhos. O próprio componente é renderizado na visualização, mas quando eu clico nele, o toogle não muda o estado visualmente.

Segui este tutorial para importar V-switch manualmente para o componente filho https://vuetifyjs.com/en/customization/a-la-carte/#manually-importing

Componente Criança

<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)
});

Então, o que estou perdendo aqui?

Answer 1

O Vuetify precisa de seu invólucro v-apppara funcionar corretamente.

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

Basta adicioná-lo como o componente raiz do seu aplicativo.