Why does a hook prevent the component from reappearing?

Question

Vue.js

Good evening. When curtain is true, the section is rendered. The same section has refs attached, which works to hide the section again by calling the function in the update hook. When curtain is true again, the section is not rendered.
I suspect that the hook is not working correctly.

Error:
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'addEventListener')
at Proxy.updated (CarList.vue?9e02:22)

<template>
  <section v-if='curtain' ref='scroll'>
  </section>
</template>

<script>
import {mapGetters, mapMutations} from 'vuex';
export default {
  name: 'CarList',
  data () {
    return {
    }
  },
  updated() {
    this.$refs.scroll.addEventListener('wheel', this.fadeOut);
  },
    methods: {
    ...mapMutations(['curtainFalse']),
    fadeOut(e) {
      if (e.deltaY < -5 && window.scrollY == 0) {
        this.curtainFalse();
        this.changeBackFalse();
      }
      console.log(this.curtain);
    }

  },
  computed: {
  	...mapGetters(['curtain']),
  }
}
</script>

Answer 1

updated() {
  this.$refs.scroll.addEventListener('wheel', this.fadeOut);
},

What kind of wickedness is this?
Check out the vue documentation, and figure out how to correctly attach event handlers to elements.
When the condition is v-iffalse, there is no element. Accordingly, $refs.scrollinstead of a reference to a non-existent element, it is written null, and you are trying to access the property of this null, which you should not do - there nullare no properties and cannot be, such accesses end in errors like the one you got.