Change image of the card component

If you just want to change the image according to the status of mini , there are several ways to do this. Just check the boolean variable that is controlling this state, and change the src of the image. Starting a Vuetify project, the name of this variable is miniVariant . Here's a basic example of a way to do this:

App.vue

    <template>
      <v-app>
        <v-navigation-drawer
          persistent
          :mini-variant="miniVariant"
          :clipped="clipped"
          v-model="drawer"
          enable-resize-watcher
          fixed
          app
        >
          <v-list>
            <v-list-tile
              value="true"
              v-for="(item, i) in items"
              :key="i"
            >
              <v-list-tile-action>
                <v-icon v-html="item.icon"></v-icon>
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title v-text="item.title"></v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
          </v-list>
        </v-navigation-drawer>
        <v-toolbar
          app
          :clipped-left="clipped"
        >
          <v-btn icon @click.stop="miniVariant = !miniVariant">
            <v-icon v-html="miniVariant ? 'chevron_right' : 'chevron_left'"></v-icon>
          </v-btn>
          <v-toolbar-title v-text="title"></v-toolbar-title>
        </v-toolbar>
        <v-content>
          <router-view :image="image"/>
        </v-content>
        <v-navigation-drawer
          temporary
          :right="right"
          v-model="rightDrawer"
          fixed
          app
        >
          <v-list>
            <v-list-tile @click="right = !right">
              <v-list-tile-action>
                <v-icon>compare_arrows</v-icon>
              </v-list-tile-action>
              <v-list-tile-title>Switch drawer (click me)</v-list-tile-title>
            </v-list-tile>
          </v-list>
        </v-navigation-drawer>
        <v-footer :fixed="fixed" app>
          <span>&copy; 2017</span>
        </v-footer>
      </v-app>
    </template>

    <script>
    export default {
      name: 'App',
      data () {
        return {
          clipped: false,
          drawer: true,
          fixed: false,
          images: [
            'logo1.png',
            'logo2.png'
          ],
          items: [
            {
              icon: 'bubble_chart',
              title: 'Menu1'
            },
            {
              icon: 'dashboard',
              title: 'Menu2'
            },
            {
              icon: 'settings',
              title: 'Menu3'
            }
          ],
          miniVariant: false,
          right: true,
          rightDrawer: false,
          title: 'Stackoverflow'
        }
      },
      computed: {
        image () {
          return this.miniVariant ? this.images[0] : this.images[1]
        }
      }
    }
    </script>

HelloWorld.vue

    <template>
      <v-container fluid>
        <v-slide-y-transition mode="out-in">
          <v-layout column align-center>
            <v-card-media height="80" :src="image"></v-card-media>
          </v-layout>
        </v-slide-y-transition>
      </v-container>
    </template>

    <script>
    export default {
      props: {
        image: String
      },
    }
    </script>