I have a component that I feed with props.

When an image throws a 404 I want to load a fallback image. So far so good.

However the @error function never fires when an image is broken and I can't figure out why! I never get 'hello event' in the console.

The component is on the first level of a nuxt page, my setup is a static SPA.

I tried to implement it as mentioned at the end of this github issue: https://github.com/vuejs/vue/issues/5404

<template>
  <div class="channel">
     <div class="img">
       <img :src="imgUrl" :alt="name" :title="name" @error="getFallBackImage" />
     </div>
  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        chanCover: this.cover
      }
    },
    props: {
      name: {
        type: String,
        required: true
      },
      cover: {
        type: String,
        required: true
      }
    },
    computed: {
      imgUrl() {
        console.log(this.chanCover)
        return "channels/"+this.chanCover+".jpg"
      },
    },
    methods: {
      getFallBackImage(event) {
        console.log("hello event")
        this.chanCover = "default"
      }
    }
  }
</script>