VueJs @error для обработки битых ссылок в изображениях

Я столкнулся со странной проблемой с обработчиком vueJs @error, чего я хочу
do заключается в том, чтобы скрыть изображения с неработающими ссылками и вместо этого отобразить заполнитель, но если у меня, например, есть два изображения, и оба из них имеют неработающие ссылки, только первое изображение неработающей ссылки отображает заполнитель, а другое изображение с неработающей ссылкой просто отображается, сломанный логотип браузера по умолчанию

вот код, который я сделал для тестирования, я знаю, что это неправильный способ написания кода в Vue, но он был для целей тестирования

  <div id = "app">
    <img width = "25%" id = "img" src = "https://upload.wikimedia.org/wikipedia/commons/5/54/Wallpaper-img_0254.jpg" @error = "handle()">
    <img width = "25%" id = "img" src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" @error = "handle()">
    <img v-show = "ifImageBroken" src = "https://via.placeholder.com/300">
    <p>{{brokenText}}</p>
    <HelloWorld/>
  </div>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  data () {
    return {
      ifImageBroken: false,
      brokenText: ''
    }
  },
  components: {
    HelloWorld
  },
  methods: {
    handle : function() {
     document.getElementById('img').style.display = 'none'
     this.ifImageBroken = true;
     this.brokenText = 'unable to load image'
    }
  }
};
</script>

Я просто хотел знать, может ли эта директива @error обрабатывать несколько случаев неработающих изображений