How to use the dom utils to get width / height? (the site's example does not help)

[HoboDev]

I tried to use this example for getting the dimensions of an element:

import { dom } from 'quasar'
const { height, width } = dom


// Some aliases of the previous method for "width" and "height" which
// returns Numbers instead of Strings:
console.log(
  height(DomElement),
  width(DomElement)
)
// 10 100

But I do not understand at all how to use this example with the options api.

If I put it in setup() the error message says: 'TypeError: computedViewerWidth2 is not a function'
And if I use it outside of setup I don't know how to get the element.

Then I tried it inside computed:

viewerWidth() {
      const { computedViewerWidth } = dom;

      console.log(computedViewerWidth(this.viewer));
      return computedViewerWidth(this.viewer);
    },

and get this error: 'TypeError: computedViewerWidth is not a function'

I would really appreciate some help.

[alexrififi]

Try it https://vueuse.org/core/useelementsize/#useelementsize

[HoboDev]

Thanks, but how is this related to quasar?
Transferring the example to the quasar functions I can get "something" to work:

<div ref="test">
some content
</div>
{{ width(test) }} 


....

setup() {
    const { height, width } = dom;
    const test = ref();

    return {
        test,
        height,
        width,
    }

using {{ width(test) }} works only if I use {{ width }} first and then hot reload with (test), but page reload yields:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect')

[sakon54321]

I was hoping to get an answer for this too. I'm getting the same error. Does anyone know how to get these utils working?

[metalsadman]

https://codepen.io/metalsadman/pen/BaxJLbW