Quasar Dynamic button - buttons for desktop, list for mobile

QDbtn.vue

<template>
   <q-btn v-if="!$q.platform.is.mobile"
          @click="$emit('click')"
          :color="color"
          :flat="flat"
          :outline="outline"
          :icon="icon"
          :loading="loading"
          :to="to"
   >
      <q-tooltip :offset="[0, 8]">{{ label }}</q-tooltip>
   </q-btn>
   <q-item v-else v-close-overlay :class="'text-'+color" @click.native="$emit('click')" :to="to">
      <q-spinner v-if="loading"></q-spinner>&nbsp;<q-item-main :label="label"/>
   </q-item>
</template>

<script>
  export default {
    props: {
      label:   String,
      icon:    String,
      flat:    Boolean,
      outline: Boolean,
      loading: Boolean,
      color:   String,
      to:      String,
    },
  }
</script>

QDbtnHolder.vue

<template>
   <q-item-side right v-if="!$q.platform.is.mobile">
      <slot></slot>
   </q-item-side>
   <q-item-side right v-else-if="loading">
      <q-spinner-bars :color="color"></q-spinner-bars>
   </q-item-side>
   <q-item-side right v-else icon="mdi-dots-vertical" :color="alert ? 'warning' : color">
      <q-popover>
         <q-list link>
            <slot></slot>
         </q-list>
      </q-popover>
   </q-item-side>
</template>

<script>
  export default {
    props: {
      loading: Boolean,
      alert: Boolean,
      color:   String,
    },
  }
</script>