Dynamic image nuxt

index.vue

<template>
  <div>
    <h1>Welcome!</h1>
    <nuxt-link to="/about">About page</nuxt-link>
    <img :src="flagUrl"/>
    <button @click="nextFlag">Next flag</button>
  </div>
</template>

<script>
var images = require.context('~assets/', false, /\.png$/)

export default {
  data: () => ({
    flags: ['france', 'germany', 'united-states'],
    flagIndex: 0
  }),
  computed: {
    flag() {
      return this.flags[this.flagIndex]
    },
    flagUrl() {
      return images(`./${this.flag}.png`)
    }
  },
  methods: {
    nextFlag() {
      if ((this.flagIndex + 1) === this.flags.length) {
        this.flagIndex = 0
      } else {
        this.flagIndex++
      }
    }
  }
}
</script>

With responsive design don't work:

<source :srcset="X" />