title: VueJS get Width of Div
body: <p>I have a Vue Component, that uses the bootstrap grid. In the child component I would like to get the current width of a certain div in the controller.</p>
  
  <p>heres the child component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="bg-prev" ref="prev"&gt;
          &lt;h1&gt;{{x}}&lt;/h1&gt;
      &lt;/div&gt;
  &lt;template&gt;
  
  export default {
    props: ['section'],
    data() {
      return {
        x: 0,
        y: 0,
      }
    },
    mounted() {
      this.getWindowWidth();
    },
    methods: {
      getWindowWidth() {
        this.x = this.$refs.prev.clientWidth;
      }
    }
  };
  &lt;style&gt;
      #bg-prev {
        width: 100%;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>In this example the width will always be 0, even though the element has a clear width when I inspect it. What am I missing here, the mounted hook is the latest one in the vue lifecycle right? Any Help is appreciated ;)</p>