VueJs - Vuetify - v-navigation-drawer with mini-variant for smartphone

Question

I want to apply mini-variant to the v-navigation-drawer when the screen size is smaller so for that I have the following so far:

<template  >
  <v-app id="inpire">
    <div class="back">
      <v-app-bar app>
        <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
        <v-spacer></v-spacer>
        <h1>{{selectedMethod}}</h1>
      </v-app-bar>

      <v-navigation-drawer v-model="drawer" src="./assets/bg.png" green app :mini-variant="mini">
        <v-list-item
          class="y"
          v-for="item in items"
          :key="item.unidade"
          :to="item.link"
          @click="change(item.unidade)"
        >{{item.unidade}}</v-list-item>
      </v-navigation-drawer>
      <v-content id="inspire">
        <router-view :dcsi="dcsi" :ipe="ipe" :rt="rt" :key="compKey"></router-view>
      </v-content>
    </div>
  </v-app>
</template>

<script>
export default {
  name: "App",

  data: () => ({
    items: [
      { unidade: "IPE", link: "/ipe" },
      { unidade: "DCSI", link: "/dcsi" },
      { unidade: "RT", link: "/rt" }
    ],
    drawer: false,
    selectedMethod: "",

    unidade: "",
    compKey: 0,
  methods: {
    change(val) {
      this.selectedMethod = val;
      this.cKey();
    },
    cKey() {
      this.compKey += 1;
      console.log(this.compKey);
    }
  },
  watch: {
    "$route.params.uni": function() {
      this.cKey();

      console.log(this.$route.params.uni);
      console.log(this.props);
    }
  },
  computed: {
    mini() {
      switch (this.$vuetify.breakpoint.name) {
        case "xs":
          return true;
        case "sm":
          return true;
        case "md":
          return true;
        case "lg":
          return false;
        case "xl":
          return false;
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
#inspire {
  background: require('./assets/mg1.jpg') no-repeat center center;
}

.y {
  color: green;
}
</style>

As a computed property I wrote mini() where it returns true or false depending on screen size. But I am getting the following error "162:9 error Expected to return a value in "mini" computed property". I don't understand why since it is returning a boolean. I also tryed adding as a prop "mini-variant-md-and-down" to the navigation-drawer which didn't return any error but also didn't work. Any hints in making the v-navigation-drawer become mini on smartphone are welcome.

Answer 1

mounted() {
    if (
      this.$vuetify.breakpoint.name === "md" ||
      this.$vuetify.breakpoint.name === "sm" ||
      this.$vuetify.breakpoint.name === "xs"
    ) {
      this.mini = true;
    }

Solved it