vuejs get ref element height on window resize

Question

I'm trying to get the height of the h1 ref element however it is showing as undefined

how can I get the height of my h1 element?

export default {
  data() {
    return { 
      h1: null,
    };
  },
  methods: {
   getH1Height() {
      console.log(this.h1);
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.h1 = this.$refs.h1;
    });
    window.addEventListener('resize', () => {
      this.getH1Height();
    });
   
  },
};

template.js

         <h1
            ref="h1">
          {{ productTitle }}
        </h1>

Answer 1

you can try :

this.$refs.h1.offsetHeight