Vue.js Vuetify右侧并排switch

我正在使用vutify 3和vuejs 3，我试图在右侧并排创建3个切换器:

<template>
  <v-card variant="outlined" class="pa-6 ma-3" color="#BDBDBD">
    <v-row class="pa- ma-0">
      <v-btn
        color="primary"
        class="mr-2"
        :loading="loading"
        :disabled="loading"
      >
        Atualizar
      </v-btn>
      <v-btn color="error" :disabled="selected.length == 0" class="mr-2">
        Plotar
      </v-btn>
      <v-btn color="warning" :disabled="selected.length == 0" class="mr-3">
        Favoritar
      </v-btn>
      <v-row class="ml-3 black-label">
        <v-switch
          label="Intraday"
          v-model="intraday"
          color="primary"
          hide-details
        ></v-switch>
        <v-switch
          label="Stocks"
          v-model="stocks"
          color="primary"
          hide-details
        ></v-switch>
        <v-switch
          label="Favorites"
          v-model="favorites"
          color="primary"
          hide-details
        ></v-switch>
      </v-row>
    </v-row>
  </v-card>
</template>

<script setup>
  import { ref } from 'vue'
  const search = ref('')
  const selected = ref([])
  const intraday = ref(false)
  const favorites = ref(false)
  const stocks = ref(false)
  const loading = ref(false)
  const msg = ref('Hello World!')
</script>

Reproducible example个

我试图将v-Switch类更改为mr-3，就像我对按钮所做的那样，但我无法获得预期的输出.