v-toolbar not behaving responsively - vue.js

Question

I am trying to implement vuetify in my project. I am newbie in VueJs & vuetify too.
I am trying to use a toolbar which contains a rounded image on the right corner. But, It is not responsive. When i open developer option and decrease the screen size to that of mobile. The rounded image does not render.
I tried using plain tags but it is actually disrupting the layout.
Here is the code
VuetifyTest.vue:
<template lang="html">
<v-toolbar>
<v-toolbar-side-icon>
<!-- <v-img src="../assets/mad_logo.png" aspect-ratio="1.7"></v-img> -->
</v-toolbar-side-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-layout
align-center
justify-space-around
wrap
>
<v-avatar
:tile= false
size="36"
color="grey lighten-4"
>
<img src="../assets/static.jpeg" alt="avatar">
</v-avatar>
</v-layout>
</v-toolbar-items>
</v-toolbar>
</template>
<script lang="js">
export default {
name: 'VuetifyTest',
props: [],
mounted() {
},
data() {
return {
}
},
methods: {
},
computed: {
}
}
</script>
<style scoped >
</style>
This is how it looks like in laptop screen
This is how it looks like in mobile screen
How do i change the code to make it responsive
PS: I also tried reducing the screen size while viewing here in reduced screen size.
Even though it showed like this..
Even though the official documentation have this problem?
How do i make it responsive..
thanks!

Answer 1

You do not have to specify v-layout within the v-toolbar - if you remove the v-layout and replace it with just the v-avatar, it works.. Examples are below:
[CodePen Mirror]
Snippet:
new Vue({ el: "#app" })
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" />
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app>
<v-toolbar>
<v-toolbar-side-icon>
</v-toolbar-side-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-avatar :tile=false size="36" color="grey lighten-4">
<img src="https://i.pravatar.cc/300?img=3" alt="avatar">
</v-avatar>
</v-toolbar>
</v-app>
</div>